位置情報を取り扱うwebサービスや、観光ブログなんかではGoogle Mapsをページに埋め込む機会が多いと思います。今回は「新しいGoogle Maps」の埋め込み地図を自由にカスタマイズできる「Google Maps Embed API」の使い方を解説します。

このAPI、2014年7月現在、1日の使用可能回数が200万回と、制限がとても緩いのでwebサービスにとっても組み込みやすいんです。さすがGoogle様！

目次

1API KEYを作成する

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

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

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

1-2Googleコンソールにアクセスする

下記のリンクから、「Googleコンソール」という画面にアクセスして下さい。ここはGoogleの様々なAPIを利用する拠点となるページです。まだの場合はログインが求められます。ここで、まずは「プロジェクトを作成」をクリックして下さい。「プロジェクト」とは、ここでは「あなたのwebサイト」と同義だと思って大丈夫です。

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

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

1-4APIリストを表示する

プロジェクトが作成できたら、左メニューの「APIと認証」→「API」とクリックして、APIの一覧を表示させて下さい。Googleが提供する全APIです。(上記画像はクリックすると拡大できます。)

1-5「Google Maps Embed API」を探す

表示させたAPI一覧の中から、「Google Maps Embed API」を探して下さい。これが、Google Mapsの埋め込み地図をカスタマイズするためのAPIの名称です。

1-6「無効」をクリックして「有効」にする

「Google Maps Embed API」の右側にある「無効」というボタンをクリックして、「有効」に変更して下さい。これで、あなたのプロジェクトで「Google Maps Embed API」を利用することができるようになります！

1-7「有効」になっていることを確認する

「無効」の文字が、緑色の「有効」になっていれば、大丈夫です。次の作業に進んで下さい。

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

続いて左メニューの「APIと認証」→「認証情報」とクリックして下さい。上記図のような画面に移動するので、下の方の「新しいキーを作成」をクリックして下さい。このキーが、API KEYのことです。

1-9キーのタイプを選択する

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

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

「許可するリファラー」を設定します。API KEYを使用できるwebサイトのURLのことですね。入力を間違えてAPI KEYが使えなかったりすると混乱するので、ここではまだ空白のまま、「作成」をクリックしてしまいましょう。必要なら後で再設定することができます。

1-11発行されたAPI KEYを確認する

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

24つのモードでGoogle Mapsを埋め込む

それではいよいよ、iframeタグ内に指定するGoogle Maps Embed APIの「埋め込み地図用URL」を組み立てていきましょう。埋め込み地図用URLは、基本的に下記のように組み立てます。Google Mapsの埋め込みには4つのモードが用意されていて、赤文字の「モード」という部分に、それぞれに対応したコードを入れることになります。

https://www.google.com/maps/embed/v1/{モード}

2-1Place mode (マーカー付きの地図)

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

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

指定できるパラメータ

サンプルプログラム

例えばPHPで埋め込み用タグを生成するには、次のようにプログラミングしましょう。

//API KEY
$key = "AIza...Y3EE";

//表示したい場所名(普段Googleの検索バーに入力する感覚で指定)
$name = "竹の塚 らーめん大";

//URLエンコード
$q = rawurlencode($name);

//埋め込み地図用URL
$url = "https://www.google.com/maps/embed/v1/place?key={$key}&q={$q}";

//地図を出力
echo "<iframe src=\"{$url}\" width=\"640\" height=\"480\"></iframe>";

2-2Search mode (検索結果の地図)

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

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

指定できるパラメータ

サンプルプログラム

PHPで、Search modeのGoogle Mapsを出力するには、次のようにプログラミングしてみて下さい。

//API KEY
$key = "AIza...Y3EE";

//検索したい施設名など(普段Googleの検索バーに入力する感覚で指定)
$name = "竹の塚 ラーメン店";

//URLエンコード
$q = rawurlencode($name);

//埋め込み地図用URL
$url = "https://www.google.com/maps/embed/v1/search?key={$key}&q={$q}";

//地図を出力
echo "<iframe src=\"{$url}\" width=\"640\" height=\"480\"></iframe>";

2-3Directions mode (アクセス方法の地図)

「Directions mode」は、「出発地から目的地までのアクセス方法」を地図上に描写します。コードはdirectionsで、「出発地」「目的地」「経由地」など、細かい指定が可能です。地名を日本語で指定する場合はURLエンコードが必要です。

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

指定できるパラメータ

サンプルリクエスト

例えば、「池袋駅」から「大塚駅」まで、「屯ちん(ラーメン屋さん)」「サンシャイン水族館」を経由して、「徒歩」でアクセスするための案内地図だったら、次の通りURLを組み立てます。ついでに、距離を「マイル」にしておきました。実際には、日本語部分をURLエンコードして下さい。

https://www.google.com/maps/embed/v1/directions?key={API KEY}&origin=池袋駅&destination=大塚駅&waypoints=池袋屯ちん|サンシャイン水族館&mode=walking&units=imperial

サンプルのデモ

上記リクエストを実際に稼働させてみました。指定通りの経由地を通っていること、表示している距離がマイルになっていることなど、確認してみて下さいね！

2-4View mode (マーカーなしの地図)

「View mode」は、目的の場所を、マーカーなしで表示するモードです。コードはviewになります。「Place mode」との違いは、マーカーの有無だけです。

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

指定できるパラメータ

サンプルリクエスト

それでは「東京スカイツリー」の衛星写真を表示させてみましょう。衛星写真にする場合、ズーム値を18にすると、いい感じになります。

https://www.google.com/maps/embed/v1/view?key={API KEY}&center=35.710063,139.8107&zoom=18&maptype=satellite

サンプルのデモ

これが、実際に上記のリクエスト通りに埋め込んでみたGoogle Mapsのデモです。地図を上にスクロールさせて行くと面白いですよー。

3Google Maps埋め込み用のHTMLタグ

「Google Maps Embed API」を利用して組み立てたURLを活用するためのHTMLタグのサンプルを紹介します。

3-1基本的な埋め込み地図用コード

iframeタグは次のように指定します。組み立てた埋め込み地図用URLを「{埋め込み地図用URL}」の部分に入れて下さい。

<iframe src="{埋め込み地図用URL}" width="600" height="450" frameborder="0"></iframe>

3-2レスポンシブに対応した埋め込み地図用コード

スマホ表示に対応する場合、下記のようにHTMLとCSSを組み合わせることで、レスポンシブに対応することができます。

HTML

<div class="googlemaps">
	<iframe src="{埋め込み地図用URL}" width="600" height="450" frameborder="0"></iframe>
</div>

CSS

.googlemaps{
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	max-width:100%;
	height:auto;
}

.googlemaps iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}