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

カレー

住所をテキストで保持しているサイトにて
住所から位置情報を動的に取得してGoogle Map表示をしたのでメモ

前提条件

  • Google Map APIの作成 & API キーを取得済みであること
  • Google API ConsoleAPI Managerにて、
    Maps JavaScript API」と「Google Maps Geocoding 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>
ざっくり補足
  1. 取得したAPIキーを指定してGoogleMapAPIが用意してくれているJSファイルをインポートする
  2. google.maps.Geocoderを使用して、住所から位置情報 (経度・緯度) を取得する
  3. 取得した位置情報を使用して、あらかじめ用意しておいた描画領域 (id="map") に
    Google Mapを表示する