Google Maps Platform / Web / Maps JavaScript API を使った際のメモ

Teruhisa - T6ADEV

入り口

Teruhisa - T6ADEV

使い始めるにはGCPプロジェクトにAPI Keyの発行とアクセス制限の設定をすること

マーカーのclickイベントにinfowindow登録して、ピン選択時の吹き出しを表示。

複数ピン登録する時はclose()処理に一工夫が必要
こんな感じで一つ選択された時はその前にすべて閉じるように。

generatedMapLocations.forEach(({ marker, infowindow }) => {
    marker.addListener('click', () => {
      generatedMapLocations.forEach((l) => {
        l.infowindow.close();
      });
      infowindow.open({
        anchor: marker,
        map,
        shouldFocus: false,
      });
    });
  });

Teruhisa - T6ADEV

Geocoding - 住所からLat/Lngなどの情報へ変換してくれる処理

results[]: { // だいたい0番目の要素でよさそう
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string, // リンク作るときなどに必要
 postcode_localities[]: string,
 geometry: {
   location: LatLng, // 目的のもの
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

Teruhisa - T6ADEV

Place IDは1年ぐらいで古くなるので使いまわしには注意すべきらしい

Teruhisa - T6ADEV

本家のGoogle Map(Web)やモバイルのGoogle Mapアプリで特定の内容を開かせることが出来る

レストランなどのお店を扱う際、queryには住所、query_place_idにはgeocodingで得たplace idを与えてみたところ、意図しない箇所に遷移してしまった。
今の所うまくいっているのは、「住所店名」でgeocodingし、queryにもこの形で与えると良さげ。

https://www.google.com/maps/search/?api=1&query=...&query_place_id=...

query : 与える文字列にはencodeURIComponent()つかってOK
query_place_id : （optional）Place ID

iOSの場合、httpsをcomgooglemapsurl に置き換えた形式にすると直接アプリを起動可能

Teruhisa - T6ADEV

複数markerがあり、地図をそれに合わせていい感じに拡大/縮小して表示したい時。