新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に

Google が新しい Google Maps Embed API を公開しました。埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。

Google MapsGoogle が新しい Google Maps Embed API を公開しました。

埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。

埋め込みコード生成用のページも用意されています。下記にアクセスしてみましょう。

例えば、ルート検索による道案内を含む地図を生成するなら 「Show driving directions」 の項目を開いて、「Origin:」 に出発地点を、「Destination:」 に目的地の住所なり名称を入力します。

Google Maps Embed API でルート検索を含んだ地図を生成

右側にプレビューが表示されますので、うまく表示されていたら 「Looks good!」 ボタンを押して次へ。すると、API key を入力しろと言われますので、Google アカウントでログインした状態で、下記の 「Google Developers Console」 にアクセスします。

API Project 内の API Access から、まずは 「Google Maps Embed API」 を有効にします。

「Google Maps Embed API」 を有効に

その上で、公開 API キーを取得します。リファラーの設定をしておくと、この API キーを使ってリクエストを投げたときに、登録されていない参照元からのアクセスは遮断されます。

API キーの取得

先ほどの埋め込みコード生成用のページで API キーを入力して 「Done」 ボタンを押すと、埋め込み用ソースコードが生成されます。

埋め込み用ソースコードの生成

ソースコードは下記のような iframe 要素です。

<iframe
  width="600"
  height="450"
  frameborder="0"
  src="https://www.google.com/maps/embed/v1/directions
  ?key=[API_KEY]
  &origin=[出発地]
  &destination=[目的地]">
</iframe>

その他の細かい仕様は 「Google Maps Embed API Developer Guide」 を確認してください。

ということで、サンプルとして最寄りの恵比寿駅から、会社のオフィスまでのルート検索マップを生成してみると下記のような感じの地図になりました。

現在 Google マップ上で提供されている地図の埋め込み機能も、今後数週間で順次この新しいフォーマットに刷新されるそうですよ。

In addition, over the coming weeks, we'll be updating existing classic Google Maps embeds to the new format so visitors can enjoy a consistent embedded Google Maps experience across the web.

Adding the new Google Maps to your website just got easier with the new Google Maps Embed API : Google Geo Developers Blog から引用

関連エントリー

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?