GoogleMapをページに埋め込む「Google Maps Embed API」の使い方

今回はGoogleMapをページに埋め込む「Google Maps Embed API」の使い方を紹介します。

これはJavaScriptを使わないので、プログラミングがよくわからない人でもそこまで難しくないのではないかと思います。

 

APIキーの取得

Google Maps Embed APIを利用するためにはまずAPIの有効化と、認証情報(APIキー)が必要になります。

先にこれらを取得してしまいましょう。

まずはGoogle Developers Consoleにアクセスして下さい。

次に管理画面の左側にある「プロジェクトを選択」をクリックします。

まだプロジェクトを作っていない人は右上の+ボタンをクリックします。すでにプロジェクトを作成している人はそれを選択してください。

プロジェクト名は好きな名前で構いません。プロジェクトIDは編集することもできますが、特に特別な理由がない限り編集流する必要はないでしょう。

作成ボタンをクリックするとプロジェクトが作成されます。

画面左上にプロジェクト名が表示されているのを確認しましょう。

 

APIの有効化

プロジェクトを作成すると画面上部に「APIを有効にする」ボタンが現れるので、クリックします。これでAPIが有効化されます。

するとGoogleが提供するAPIの一覧が表示されます。今回は上の検索フォームに「Google Maps Embed API」と入力して下さい。

そうするとGoogle Maps Embed APIが選択できるようになるので、クリックします。

すると画面上に「有効にする」ボタンがあるので、クリックします。グルアナリティクス ろえでAPIが使用できるようになります。

 

認証情報(APIキー)の作成

Google Maps Embed APIを使用できるようにするために、APIキーを取得します。画面左にある「認証情報」をクリックします。

次に「認証情報を作成」をクリックします。

どの認証情報を作成するか選択できます。今回はAPIキーをクリックします。

これでAPIキーが作成されるはずです。

 

APIキーの編集

画面左の「認証情報」をクリックし、先ほど作成したAPIキーを選択します。

まずは名前をわかりやすいものに変更しましょう。ぱっと見でわかる名前にしておくといいと思います。

名前の下に「キーの制限」という項目があります。この項目では他のサイトが勝手にAPIを使用しないように制限をかけることができます。例えば、Webサイトで利用する場合には「HTTPリファラー」を選択します。

 

タグの埋め込み

HTMLに組み込むには<iframe>タグを使用します。src属性に埋め込みたい地図のURLを指定します。APIキーは先ほど取得したものをそのままコピペしてください。

<iframe src="//www.google.com/maps/embed/v1/地図の種類?key=APIキー"></iframe>

 

地図の種類には以下の5つがあります。

  • place:指定した場所にマーカーをつけることができる
  • search:条件を指定し、その検索結果を表示することができる
  • directions:出発点を指定し、そこから目的地までのアクセス方法を表示する
  • view:シンプルな埋め込み地図を表示する
  • streetview:ストリートビュー形式で埋め込む

 

placeのパラメーター

パラメーターを指定することができます。

種類は以下の通り。

  • key:先ほど取得したAPIキー
  • q:マーカーを立てる場所をキーワード、もしくはplace_idで選択する。「place_id:」を接頭辞としてつける。また、URLはエンコードする。
  • zoom:拡大率。0〜22で指定する。
  • maptype:地図の種類を指定する。”roadmap”はデフォルト、”satellite”は航空写真。
  • language:言語を指定。”jp”は日本語。”en”は英語。

 

searchのパラメーター

  • key:先ほど取得したAPIキー
  • q:マーカーを立てる場所をキーワード、もしくはplace_idで選択する。「place_id:」を接頭辞としてつける。また、URLはエンコードする。
  • zoom:拡大率。0〜22で指定する。
  • maptype:地図の種類を指定する。”roadmap”はデフォルト、”satellite”は航空写真。
  • language:言語を指定。”jp”は日本語。”en”は英語。
  • center:マップ中心に表示する位置を指定。指定がない場合は自動判定となる。

 

directionsのパラメーター

  • key:先ほど取得したAPIキー
  • zoom:拡大率。0〜22で指定する。
  • maptype:地図の種類を指定する。”roadmap”はデフォルト、”satellite”は航空写真。
  • language:言語を指定。”jp”は日本語。”en”は英語。
  • origin:出発点をキーワードか座標で指定。URLはエンコードする。
  • destination:目的地をキーワードか座標で指定。URLはエンコードする。
  • waypoints:道中の中継地点をキーワードか座標で指定。複数指定する場合は「|」で区切る。URLはエンコードする。
  • mode:交通手段を指定する。drivingは車。walkingは徒歩。bicyclingは自転車。transitは電車、バスなどの公共の交通機関。flyingは飛行機。
  • avoid:回避したい場所をキーワードで指定する。複数指定は「|」で区切る。tollsは有料コース。ferriesはフェリー。highwaysは高速道路。
  • units:距離の単位を指定する。metricはメートル。imperialはマイル。

 

viewのパラメーター

  • key:先ほど取得したAPIキー
  • zoom:拡大率。0〜22で指定する。
  • maptype:地図の種類を指定する。”roadmap”はデフォルト、”satellite”は航空写真。
  • language:言語を指定。”jp”は日本語。”en”は英語。
  • center:マップ中心に表示する位置を指定。指定がない場合は自動判定となる。

 

streetviewのパラメーター

  • key:先ほど取得したAPIキー
  • language:言語を指定。”jp”は日本語。”en”は英語。
  • location:位置座標を指定。panoを指定しない場合はlocationを必ず指定する。
  • pano:ストリートビューのパノラマIDを指定。locationを指定しない場合はpanoを必ず指定する。
  • heading:景色の東西南北を指定。0が北。
  • pitch;景色の垂直角度を90〜-90で指定。正の値なら見上げた景色、負の値なら見下ろした景色になる。
  • fov:地図の遠近値を10〜100で指定する。数値が低いほど近くからみた景色になる。