TIL

Today I Learned. 知ったこと、学んだことを書いていく

Google Maps API(Google Maps Embed API)を使ってみる

Google Maps APIというもので簡単にGoogle Mapを表示できるらしいからやってみた!

今回は「Google Maps Embed API」を使って表示してみる。

JavaScriptを使う「Google Maps JavaScript API」もあるらしい。

4つのモード

Google Maps を表示するときは4つモードがある

  • Placeモード
  • Directionsモード
  • Searchモード
  • Viewモード

Placeモード

ある位置にピンを指すことができる

Directionsモード

2か所以上のルート、距離などを表示することができる

Searchモード

表示可能なマップに検索結果を表示する

Viewモード

ピンやルートが表示されていないマップを表示することができる


Googleマップを表示してみる

表示を行うまでの順序は以下の通り

  1. APIキーの取得
  2. HTMLで埋め込む

1.APIキーの取得

  1. Google API Consoleにアクセス
  2. 新規プロジェクトを作成するか、既存プロジェクトを選択する
  3. 「続行1をクリック
  4. 使用するAPIを「Google Maps Embed API」を選択する
  5. 「必要な認証情報」をクリック
  6. APIキーが表示される

2.HTMLで埋め込む

今回は「Placeモード」でさいたまスーパーアリーナにピンを指して表示してみた

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GoogleMapsAPIテスト</title>
</head>
<body>
    <h1>GoogleMapsAPIを使ってみた</h1>

    <iframe
      width="600"
      height="450"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=取得したAPIキー
        &q=埼玉県さいたま市中央区新都心8" allowfullscreen>
    </iframe>
</body>
</html>

すごい簡単に表示できた!!

f:id:tmg1998:20180314233155p:plain

参考文献

Google Maps Embed API  |  Google Maps Embed API  |  Google Developers