Google Maps Embed APIを使ってマップを表示する方法

4289 ワード
googleapi googleapi テキストリンク

概要

  • Google Maps Embed APIを使って地図を表示させます
  • API KEYさえ取得できればあとはコードを貼り付けるだけ
  • なので、Google Maps Embed API KEY取得方法を絵付きで丁寧に説明します

手順

  1. Google Maps Embed APIキーを取得
  2. APIキーの制限を確認
  3. 試す

Google Maps Embed APIキーを取得

プロジェクトを作成します。

プロジェクト名はなんでもいいです。今回は、otameshi-map-projectという名称で作りました。

API keyが作成されるので、コピーします。今回は AIzaSyCcbgwozCTpFwcXnHt1c-HRTHRWqep6Hto でした。　（いまはプロジェクトを削除しているのでこのAPI KEYは使えません）

APIキーの制限を確認

consoleに移動します。

矢印の箇所を選択して、右下の鉛筆（？）アイコンを押します。

APIキーのアプリケーションの制限を確認します。最初はなしになっています。これだと、だれでも利用できる状態なので、本番環境で使う場合は、アプリケーションの制限をつける必要があります。例えば、HTTPリファラーを選択して、本番環境のURLを指定するといいと思います。

developmentの場合であれば、とりあえずなしでいいと思います。（今回はなしのままでゆきます）

試す

test.htmlファイルを作成して、下記のコードを貼り付けます。<iframe ・・・ </iframe>の箇所がGoogle Maps Embed APIで作成される箇所です。詳しいフォーマットはこちらのページを見て下さい。

test.html
<div>
  <h2>大國魂神社の地図</h2>
  <iframe frameborder="0" style="border:0; width: 100%; height: 50vh" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCcbgwozCTpFwcXnHt1c-HRTHRWqep6Hto&q=大國魂神社"
    allowfullscreen>
  </iframe>
</div>

適当なブラウザで開くと下記の様にgoogle mapが表示されます。

とても簡単ですね。

2018年6月10日現在、Google Maps Embed APIは無料なのでこれも嬉しい。

以上です。