Google Maps Embed API
Google Mapsを自分のサイトやブログに埋め込んで表示できる「Google Maps Embed API」の使い方をまとめています。JavaScriptを利用しないので、プログラミングが苦手な方でも手軽に利用できます。
- Google Maps Embed API
- Google Embed APIの公式リファレンスです。詳しい仕様、プログラミング方法などを確認できます。
準備 (APIキーの取得)
Google Maps Embed APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。
アカウントの用意
APIキーを取得するためには、Googleのユーザーアカウントが必要です。まだ持っていない人は作成して下さいね。
- Googleアカウントの作成
- Googleのアカウントを作成するには、このページから操作を行なって下さい。
管理画面
アカウントを取得後、開発者たちの管理画面であるGoogle Developers Consoleにアクセスして下さい。
- Google Developers Console
- Googleが提供するAPIを活用する開発者たちの拠点となるページ。ブックマークしておくと今後、便利です。
プロジェクトの作成
管理画面の右上にあるメニューをクリックして下さい。
プロジェクトの管理画面が出てきます。既に作成している人は、利用するプロジェクトを選択して下さい。まだ作成していない人は、「+」をクリックします。
作成画面に移動します。好きなプロジェクト名を入力して「作成」をクリックして下さい。「プロジェクトID」も編集可能ですが、特に変更する必要はありません。ボタンをクリックして問題がなければ、プロジェクトが作成されます。
該当部分に、プロジェクト名が表示されていることを確認しましょう。
APIを有効にする
このプロジェクトにおいて「Google Maps Embed API」を利用できるように、有効化する作業を行ないます。
管理画面の上部にある、「APIを有効にする」をクリックして下さい。
Googleが提供するAPIの一覧が表示されます。まずは目的のAPIを探します。左上の検索フォームに「Google Maps Embed API」と入力して下さい。
APIが絞り込まれて、いくつか候補が表示されるので、その中から「Google Maps Embed API」をクリックして下さい。
設定画面に移動します。ここで「有効にする」をクリックして下さい。これで、このプロジェクトで「Google Maps Embed API」を使えるようになります。「認証情報を作成して下さい」という案内が表示されるかもしれません。認証情報とは、この後に作成するAPIキーのことです。
認証情報(APIキー)の作成
仕上げに認証情報(APIキー)を取得しましょう。APIキーは、他のAPI(例えば、Google Maps Static APIなど)と共用することもできます。左メニューにある「認証情報」をクリックして下さい。
「認証情報」の設定画面に移動します。「認証情報を作成」をクリックして下さい。
どの種類の認証情報を作成するか、メニューが表示されます。Google Maps JavaScript APIではAPIキーを利用します。なので「APIキー」をクリックして下さい。
APIキーが作成されます。このキーを利用して、プログラミングしていきます。お疲れ様でした。作成したAPIキーは、認証情報の画面に一覧表示されます。
APIキーの編集
認証情報の画面で、目的のAPIキーの名前部分をクリックして下さい。
APIキーの編集画面に移動します。編集後は下部にある「保存」をクリックしないと反映されません。
名前の設定
まずは、後々管理しやすいように、APIキーに名前を付けておきましょう。
キーの制限
名前の下には「キーの制限」という項目があります。他サイトがこのAPIキーを勝手に使えないように設定できます。例えば、ウェブサイトで利用する場合は「HTTPリファラー」を選択して下さい。リファラーを*.syncer.jp/*と設定すれば、ドメインがsyncer.jp以外のウェブページで、このAPIキーを利用できなくなります。
プログラミング
埋め込み用の地図を表示するには、iframe要素を利用します。src属性に、埋め込み地図のurlを指定して下さい。{APIキー}は、前章で取得したものです。
<iframe src="//www.google.com/maps/embed/v1/{地図の種類}?key={APIキー}"></iframe>埋め込み地図には5種類のモードが用意されています。{地図の種類}の部分をコードに置き換えて下さい。
| コード | 説明 |
|---|---|
| place | 指定した場所にマーカーを付けることができる。 |
| search | 指定した条件の検索結果を表示することができる。 |
| directions | 指定した出発地から目的地までのアクセス方法を表示することができる。 |
| view | マーカーなしのシンプルな埋め込み地図。 |
| streetview | ストリートビューの写真を表示する。 |
place (マーカー付き地図)
placeは、最もスタンダードな地図です。紹介したい1つの場所にマーカーを立てます。
デモ
東京駅の周辺を表示しています。qパラメータの「%E6%9D%B1%E4%BA%AC%E9%A7%85」は、「東京駅」という日本語をURLエンコードしたものです。
<iframe src="//www.google.com/maps/embed/v1/place?key={APIキー}&q=%E6%9D%B1%E4%BA%AC%E9%A7%85&zoom=15"></iframe>パラメータ
| 名前 | 説明 |
|---|---|
| key | この記事で説明した、取得したAPIキー。 |
| q | マーカーを立てる場所。キーワード(スポット名、住所)、またはプレイスidで指定する。プレイスidを指定するには値の接頭辞にplace_id:を付ける。値はurlエンコードすること。 |
| zoom | ズーム値。0〜22の間で指定する。 |
| maptype | 地図の種類を指定する。
|
| language | 地図上に表記される言語を、国コードで指定する。
|
| region | 地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。 |
search (検索結果の表示)
searchは検索結果の地図です。位置座標と検索クエリを指定します。例えば、「ラーメン」というキーワードを指定すると、地図上のラーメン店の部分にアイコンが表示されます。
デモ
竹ノ塚駅周辺のラーメン店を表示しています。qパラメータの「%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3」は、「ラーメン」という日本語をURLエンコードしたものです。
<iframe src="//www.google.com/maps/embed/v1/search?key={APIキー}¢er=35.7943492,139.7925433&zoom=16&q=%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%B3"></iframe>パラメータ
| 名前 | 説明 |
|---|---|
| key | この記事で説明した、取得したAPIキー。 |
| q | 検索キーワード。値はurlエンコードすること。 |
| center | 地図の中心の位置座標。指定しない場合、表示される場所はキーワードによる自動判定となる。 |
| zoom | ズーム値。0〜22の間で指定する。 |
| maptype | 地図の種類を指定する。
|
| language | 地図上に表記される言語を、国コードで指定する。
|
| region | 地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。 |
directions (アクセス方法の表示)
directionsは、アクセス方法を表示します。「出発地」「目的地」「経由地」「交通手段」を設定できます。
デモ
origin(出発地)に「東京駅」、destination(目的地)に「名古屋駅」を指定しました。値はそれぞれ、urlエンコードしています。
<iframe src="//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"></iframe>パラメータ
| 名前 | 説明 |
|---|---|
| key | この記事で説明した、取得したAPIキー。 |
| origin | 出発地をキーワード、または位置座標で指定する。値はurlエンコードをすること。 |
| destination | 目的地をキーワード、または位置座標で指定する。値はurlエンコードをすること。 |
| waypoints | 経由地をキーワード、または位置座標で指定する。複数指定する場合は、パイプライン(|)で区切る。値はurlエンコードをすること。 |
| mode | 交通手段をキーワードで指定する。省略した場合、自動判定となる。
|
| avoid | 避けたいコースをキーワードで指定する。複数指定する場合は、パイプライン(|)で区切る。
|
| units | 距離の単位をキーワードで指定する。省略した場合、地域による自動判定となる。
|
| zoom | ズーム値。0〜22の間で指定する。 |
| maptype | 地図の種類を指定する。
|
| language | 地図上に表記される言語を、国コードで指定する。
|
| region | 地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。 |
view (シンプルな地図)
viewは、目的の場所をマーカーなしで表示します。余計な情報を表示したくない場合に有用です。
デモ
東京スカイツリーの周辺を、航空地図で表示しています。
<iframe src="//www.google.com/maps/embed/v1/view?key={APIキー}¢er=35.710063,139.8107&zoom=18&maptype=satellite"></iframe>パラメータ
| 名前 | 説明 |
|---|---|
| key | この記事で説明した、取得したAPIキー。 |
| center | 地図の中心の位置座標。 |
| zoom | ズーム値。0〜22の間で指定する。 |
| maptype | 地図の種類を指定する。
|
| language | 地図上に表記される言語を、国コードで指定する。
|
| region | 地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。 |
streetview (ストリートビュー)
streetviewは、ストリートビューを、角度や遠近値を調整して表示できます。
デモ
竹ノ塚駅のストリートビューを表示しています。
<iframe src="//www.google.com/maps/embed/v1/streetview?key={APIキー}&location=35.794463,139.791410&heading=210&pitch=15&fov=50"></iframe>パラメータ
| 名前 | 説明 |
|---|---|
| key | この記事で説明した、取得したAPIキー。 |
| location | 位置座標。panoを指定しない場合に必須。 |
| pano | ストリートビューの画像を表す、パノラマid。locationを指定しない場合に必須。 |
| heading | 景色の水平方向(東西南北)の角度を-180〜360で指定する。0が真北、90が真東、180が真南、270が真西。 |
| pitch | 景色の垂直方向の角度を-90〜90で指定する。正の値なら見上げる、負の値なら見下ろす。 |
| fov | 遠近値を10〜100で指定する。数値を上げるほど、遠くからの景色になる。 |
| language | 地図上に表記される言語を、国コードで指定する。
|
| region | 地図上の境界線やラベルなどの材料となる地域をccTLD(トップレベルドメイン)に準拠したコードで指定する。 |