Google Maps Embed APIの使い方まとめ!カスタム地図を埋め込もう

Google Maps Embed APIの使い方まとめ!カスタム地図を埋め込もう

位置情報を取り扱うwebサービスや、観光ブログなんかではGoogle Mapsをページに埋め込む機会が多いと思います。今回は「新しいGoogle Maps」の埋め込み地図を自由にカスタマイズできる「Google Maps Embed API」の使い方を解説します。このAPI、2015年9月現在、1日の使用可能回数が200万回と、制限がとても緩いのでwebサービスにとっても組み込みやすいんです。さすがGoogle様!

準備(APIキーの取得)

最初が難関…、というか一番面倒くさいフェーズだと思って下さい。「Google Maps Embed API」を利用するには、「API KEY」が必須です。「API KEY」とは「誰がAPIを使っているか」を示すキーで、Google側が使用回数制限の状況などを把握するのに必要です。まずは、API KEYを取得しましょう。難しいことは全くなく、ただの作業です。

Googleのアカウントを用意する

API KEYを取得するには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。

Google Developers Consoleにアクセスする

下記のリンクから、「Googleコンソール」という画面にアクセスして下さい。ここはGoogleの様々なAPIを利用する拠点となるページです。まだの場合はログインが求められます。

Google Developers Console
Google Developers Console

ここで、まずは左上にある「プロジェクトを作成」というボタンをクリックして下さい。「プロジェクト」とは、ここでは「あなたのwebサイト」と同義だと思って大丈夫です。

プロジェクトを作成する

新しいプロジェクトを作成する
新しいプロジェクトを作成する

入力画面が出現するので、好きなプロジェクト名を入力します。私の場合は、このブログ名と同じ「Syncer」というプロジェクト名にしました。プロジェクトIDは、自動的に決まるランダムな文字列なので、気にしなくて大丈夫です。プロジェクト名を入力したら「作成」をクリックすれば完了です。

プロジェクトのページ
プロジェクトのページ

しばらく待つと、自動的にそのプロジェクトの専用ページに移動します。

プロジェクトを選択する
プロジェクトを選択する

次回以降のアクセスで同じ場所に来たい場合は、Google Developers Consoleのトップページで、このプロジェクト名をクリックして下さいね。

[Google Maps Embed API]を有効にする

プロジェクトが作成できたら、そのプロジェクトで「Google Maps Embed API」を扱えるように設定しましょう。

「API」をクリックする
「API」をクリックする

左メニューの「APIと認証」→「API」という順にクリックして下さい。

APIの選択画面
APIの選択画面

Googleが提供する様々なAPIが表示され、この中から有効にしたいAPIを選択する形です。

「Google Maps Embed API」を選択する
「Google Maps Embed API」を選択する

左上にあるフォームに「Google Maps Embed API」と入力して下さい。いくつか候補が表示されるので、その中から「Google Maps Embed API」をクリックして下さい。

「Google Maps Embed API」を有効にする
「Google Maps Embed API」を有効にする

設定画面に移動します。ここで「APIを有効にする」というボタンをクリックして下さい。

「Google Maps Embed API」が有効になる
「Google Maps Embed API」が有効になる

「Google Maps Embed APIが有効になりました」というポップアップが出れば、完了です。これで、このプロジェクトで「Google Maps Embed API」を使えるようになりました。

APIキーを作成する

「認証情報」をクリックする
「認証情報」をクリックする

APIキーを作成しましょう。左メニューの「APIと認証」→「認証情報」という順にクリックして下さい。

「新しいキーを作成」をクリックする
「新しいキーを作成」をクリックする

上記図のような画面に移動するので、「公開APIへのアクセス」という項目内の、「新しいキーを作成」をクリックして下さい。このキーが、APIキーのことです。

「ブラウザキーを作成」をクリックする
「ブラウザキーを作成」をクリックする

キーのタイプを選択します。今回はweb画面でGoogle Mapsを表示させるので「ブラウザキー」を選択しましょう。アプリなどを作成する場合は「Androidキー」「iOSキー」が必要になってきますねー。

許可するリファラーを設定する
許可するリファラーを設定する

「許可するリファラー」を設定します。APIキーを使用できるwebサイトのURLのことですね。ここに入力したホスト以外のページでは、アプリケーションを利用できません。入力を間違えてAPIキーが使えなかったりすると、エラーの原因が分からなく混乱するので、ここではまだ空白(どのページでも使える)のまま、「作成」をクリックしてしまいましょう。後で再設定することができるので、本稼働に設定して下さい。

APIキーを確認する
APIキーを確認する

お疲れ様でした!これでAPIキーが発行されたはずです。「Google Maps Embed API」は、ソースコード上からユーザーにAPIキーが丸見えになる性質なので、特に秘密にする必要はありません。他のウェブサイトで勝手に使用されるのを防ぎたい場合は「許可するリファラー」を設定することで対応しましょう。

5種類の埋め込み地図の説明

APIキーが用意できたら、いよいよ、iframeタグを使って地図を表示するため、Google Maps Embed APIの「埋め込み地図用URL」を組み立てていきましょう。埋め込み地図用URLは、基本的に下記のように組み立てます。Google Mapsの埋め込みには5つのモードが用意されていて、「地図の種類」という部分に、それぞれに対応したコードを入れることになります。

https://www.google.com/maps/embed/v1/{地図の種類}?key={取得したAPIキー}

それぞれの地図は、下記の通り、特徴を持っています。

place
指定した場所にマーカーを付けることができる。
search
指定した条件の検索結果を表示することができる。
directions
指定した出発地から目的地までのアクセス方法を表示することができる。
view
マーカーなしのシンプルな埋め込み地図。これならプログラミングではなく、単純にGoogle Mapsのページから埋め込みコードを取得した方が楽。
streetview
ストリートビューの景色(写真)を表示する。閲覧者はそこから自由に操作することができる。

Place (マーカー付き地図)

シンプルな、マーカー付きの埋め込み地図の説明です。

Placeの特徴

「Place mode」は、最もスタンダードな地図です。紹介したい1つの場所にマーカーを立てた地図を表示します。コードはplaceです。qパラメータに「目的の場所」を指定して下さい。「緯度、経度」を指定しても、「場所名」を指定しても大丈夫ですが、日本語の場合はURLエンコードをする必要があります。

埋め込み用のURL

下記のURLにパラメータを付けます。

https://www.google.com/maps/embed/v1/place

例えば、冒頭のサンプル地図の場合は、下記のように、URLを組み立てました。%E6%9D%B1%E4%BA%AC%E9%A7%85は「東京駅」という日本語をURLエンコードしたものです。

https://www.google.com/maps/embed/v1/place?key={取得したAPIキー}&q=%E6%9D%B1%E4%BA%AC%E9%A7%85&zoom=15

パラメータ

key
この記事で説明した、取得したAPIキー。
q
マーカーを立てる場所。キーワード、または座標で指定する。日本語キーワードで指定する場合はURLエンコードをすること。
center
地図の中心地を緯度、経度で指定。公式リファレンスには利用できる案内が掲載されていますが、指定すると不具合が出てしまいます。
zoom
ズーム値。0〜21の間で指定する。
maptype
地図の種類(マップタイプ)を指定する。
roadmap … 通常(デフォルト)
satellite … 衛星写真
language
地図上に表記される言語を国コードで指定する。
jp … 日本語(デフォルト)
en … 英語
region
地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

Search (検索結果の表示)

お店の分布図など、あるキーワードの検索結果を地図に反映します。

Searchの特徴

「Search mode」は、地図上で検索結果を表示します。例えば、上記図は中心地座標を「竹ノ塚駅」、キーワードを「ラーメン」で検索した結果です。該当場所に赤いアイコンが表示され、それをクリックすると、その場所の情報を確認することができます。コードはsearchで、qパラメータには「検索する施設名など」を指定して下さい。日本語の場合はURLエンコードが必要です。

埋め込み用のURL

下記のURLにパラメータを付けます。

https://www.google.com/maps/embed/v1/search

例えば、冒頭のサンプル地図の場合は、下記のように、URLを組み立てました。%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3は「ラーメン」という日本語をURLエンコードしたものです。

https://www.google.com/maps/embed/v1/search?key={取得したAPIキー}&center=35.7943492,139.7925433&zoom=16&q=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3

パラメータ

key
この記事で説明した、取得したAPIキー。
q
検索ワードを指定する。日本語で指定する場合はURLエンコードをすること。
center
地図の中心地を緯度、経度で指定。必須ではないが、指定しない場合、検索ワードによっては検索範囲が世界中になる。
zoom
ズーム値。0〜21の間で指定する。必須ではないが、指定しない場合、検索ワードによっては表示範囲が世界中になる。
maptype
地図の種類(マップタイプ)を指定する。
roadmap … 通常(デフォルト)
satellite … 衛星写真
language
地図上に表記される言語を国コードで指定する。
jp … 日本語(デフォルト)
en … 英語
region
地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

Directions (アクセス方法の表示)

ある地点からある地点への経路と距離などといった情報を地図に表示します。

Directionsの特徴

「Directions mode」は、「出発地から目的地までのアクセス方法」を地図上に描写します。コードはdirectionsで、「出発地」「目的地」「経由地」など、細かい指定が可能です。地名を日本語で指定する場合はURLエンコードが必要です。サンプルでは出発地を「東京駅」、目的地を「名古屋駅」、マップタイプを「衛星写真」で設定しています。

埋め込み用のURL

下記のURLにパラメータを付けます。

https://www.google.com/maps/embed/v1/directions

例えば、冒頭のサンプル地図の場合は、下記のように、URLを組み立てました。origindestinationプロパティのそれぞれの値は、日本語をURLエンコードしたものです。

https://www.google.com/maps/embed/v1/directions?key={取得したAPIキー}&origin=%E6%9D%B1%E4%BA%AC%E9%A7%85&destination=%E5%90%8D%E5%8F%A4%E5%B1%8B%E9%A7%85&maptype=satellite

パラメータ

key
この記事で説明した、取得したAPIキー。
origin
出発地をキーワード、または座標で指定する。日本語キーワードで指定する場合はURLエンコードをすること。
destination
目的地をキーワード、または座標で指定する。日本語キーワードで指定する場合はURLエンコードをすること。
waypoints
経由させたい場所をキーワード、または座標で指定する。日本語キーワードで指定する場合はURLエンコードをすること。複数指定する場合はパイプライン(|)で区切る。
mode
交通手段をコードで指定する。指定しない場合、最適な交通手段が自動的に選択される。
driving … 車
walking … 徒歩
bicycling … 自転車
transit … 電車などの公共機関
flying … 飛行機
avoid
避けたいコースをコードで指定する。複数指定する場合はパイプライン(|)で区切る。
tolls … 有料コース
ferries … フェリー
highways … 高速道路
units
距離の単位をコードで指定する。指定しない場合、表示する地域で一般的に使用されている単位が適用される。
metric … メートル
imperial … マイル
center
地図の中心地を緯度、経度で指定。必須ではないが、指定しない場合、検索ワードによっては検索範囲が世界中になる。
zoom
ズーム値。0〜21の間で指定する。必須ではないが、指定しない場合、検索ワードによっては表示範囲が世界中になる。
maptype
地図の種類(マップタイプ)を指定する。
roadmap … 通常(デフォルト)
satellite … 衛星写真
language
地図上に表記される言語を国コードで指定する。
jp … 日本語(デフォルト)
en … 英語
region
地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

View (シンプルな地図)

何の特徴もないシンプルな地図です。

Viewの特徴

「View mode」は、目的の場所を、マーカーなしで表示するモードです。コードはviewになります。「Place mode」との違いは、マーカーの有無だけです。Google Mapsのページで生成できるHTMLタグとほとんど変わりません。

埋め込み用のURL

下記のURLにパラメータを付けます。

https://www.google.com/maps/embed/v1/view

例えば、冒頭で紹介したサンプル地図の場合は、次のようにURLを組み立てています。

https://www.google.com/maps/embed/v1/view?key={取得したAPIキー}&center=35.710063,139.8107&zoom=18&maptype=satellite

パラメータ

key
この記事で説明した、取得したAPIキー。
center
地図の中心地を緯度、経度で指定。
zoom
ズーム値。0〜21の間で指定する。
maptype
地図の種類(マップタイプ)を指定する。
roadmap … 通常(デフォルト)
satellite … 衛星写真
language
地図上に表記される言語を国コードで指定する。
jp … 日本語(デフォルト)
en … 英語
region
地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

Street View (ストリートビュー)

ストリートビューの写真を表示することができます。

Street Viewの特徴

「Street View mode」は、ストリートビューの景色を、細かい角度や遠近値を指定して表示することができます。閲覧者はそこから自由に操作できます。場所については、locationパラメータで座標を指定するか、特定の写真ID(パノラマID)をpanoで指定することができます。通常はlocationを使えば大丈夫でしょう。

埋め込み用のURL

下記のURLにパラメータを付けます。

https://www.google.com/maps/embed/v1/streetview

サンプルのストリートビューの写真は、下記のURLで呼び出しました。

https://www.google.com/maps/embed/v1/streetview?key={取得したAPIキー}&location=35.794463,139.791410&heading=210&pitch=15&fov=50

パラメータ

key
この記事で説明した、取得したAPIキー。
location
場所を座標で指定する。
pano
パノラマIDを指定する。
heading
景色の水平方向(東西南北)を-180360の間で指定する。0が北、90が東、180が南、270が西。
pitch
景色の垂直方向(角度)を-9090の間で指定する。0が真っすぐとなる。数値を上げるほど、見上げる形になる。
fov
景色の遠近値を10100の間で指定する。数値を上げるほど、遠くからの景色になる。
language
地図上に表記される言語を国コードで指定する。
jp … 日本語(デフォルト)
en … 英語
region
地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。

埋め込み用HTMLを作成する

地図を埋め込むための、iframeタグを作成しましょう。

サンプルコード

iframeタグのsrc属性にURLを指定して下さい。よろしければ、下記の、レスポンシブに対応したテンプレートを使って下さいね。スタイルシートの、syncer-embedセレクタ内、padding56.25%の数値を増やすほど、縦長の地図になります。これは、横幅100%に対する縦幅のパーセンテージです。

HTML

<div class="syncer-embed">
	<iframe src="{埋め込み用のURL}"></iframe>
</div>

CSS

.syncer-embed
{
	height: 0 ;
	margin: 2em auto 0 ;
	border: 1px solid rgba( 0,0,0, .1 ) ;
	max-width: 99% ;
	padding: 0 0 56.25% ;		// 横幅100%に対する縦幅のパーセンテージ
}

.syncer-embed iframe
{
	margin: 0 ;
	padding: 0 ;
	width: 100% ;
	height: 100% ;
	position: absolute ;
	top: 0 ;
	left: 0 ;
	border: none ;
}

サンプルデモ

次のように、横幅に応じて、縦幅が広がったり狭まったりするレスポンシブ仕様になります。モバイルフレンドリーな地図を表示して下さいね。