【JavaScript】Google Map APIで住所から位置情報取得 & 表示

<!-- ここにGoogle Mapを表示する -->
<div id="map" class="map"></div>

<style>
.map {
  width: 400px;
  height: 400px;
}
</style>

<!-- APIキーを指定してjsファイルを読み込む -->
<script async src="https://maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap"></script>
<script type="text/javascript">
// Google Mapを表示する関数
function initMap() {
  const geocoder = new google.maps.Geocoder();
  // ここでaddressのvalueに住所のテキストを指定する
  geocoder.geocode( { address: '{住所}'}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      const latlng = {
        lat: results[0].geometry.location.lat(),
        lng: results[0].geometry.location.lng()
      }
      const opts = {
        zoom: 15,
        center: new google.maps.LatLng(latlng)
      }
      const map = new google.maps.Map(document.getElementById('map'), opts)
      new google.maps.Marker({
        position: latlng,
        map: map 
      })
    } else {
      console.error('Geocode was not successful for the following reason: ' + status)
    }
  })
}
</script>