Google Maps API利用方法 (静的マップ、埋め込みマップ)

コンソールにログイン

• https://console.cloud.google.com/google/maps-apis/new?hl=ja

APIの有効化

APIを利用するには「有効にする」をクリック

APIキーの生成

APIのサンプル (Maps Static APIの例)

おやきの店うしこしのマップ

key=のところに、先ほど取得したAPIキーを指定する。

• https://maps.googleapis.com/maps/api/staticmap?center=36.30403066476505,%20137.93165161571605&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C36.30403066476505,%20137.93165161571605&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

例

• 公式ドキュメント

埋め込みマップの場合 (iframe)

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    &q=36.30403066476505, 137.93165161571605">
</iframe>

• 公式ドキュメント

Googleマップ v2からv3にアップグレード方法