このガイドでは、ウェブページにインタラクティブな地図を埋め込む方法について説明します。
Maps Embed API の URL を作成する
Maps Embed API を読み込む URL の例を次に示します。
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS
次のように置き換えます。
- MAP_MODE は、実際の地図モードに置き換えます。
- YOUR_API_KEY は、実際の API キーに置き換えます。詳しくは、API キーを取得するをご覧ください。
- PARAMETERS は、地図モードの必須パラメータとオプション パラメータに置き換えます。
URL を iframe に追加する
ウェブページで Maps Embed API を使用するには、作成した URL を iframe の src
属性の値として設定します。iframe の height
属性と width
属性で地図のサイズを制御します。次に例を示します。
<iframe
width="450"
height="250"
frameborder="0" style="border:0"
referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
allowfullscreen>
</iframe>
上記の iframe サンプルでは、追加のプロパティが使用されています。
allowfullscreen
プロパティ: 地図の特定の部分を全画面表示できるようにします。- 地図の周囲から標準の iframe 境界線を除去する
frameborder="0"
プロパティとstyle="border:0"
プロパティ。 referrerpolicy="no-referrer-when-downgrade"
プロパティ。ブラウザが完全な URL をReferer
ヘッダーとしてリクエストとともに送信できるようにすることで、API キーの制限が適切に機能するようにします。
iframe のサイズはウェブサイトの構造やデザインに合わせて変更できますが、一般的には大きい地図は訪問者が操作しやすいものであることがわかっています。なお、埋め込み地図は、どちらのサイズも 200 ピクセル未満の場合はサポートされません。
API キーの制限
ホスティング ウェブサイトの referrer
メタタグが no-referrer
または same-origin
に設定されている場合、ブラウザは Referer
ヘッダーを Google に送信しません。API キーの制限によってリクエストが拒否されることがあります。制限が正しく機能するには、上記の例のように referrerpolicy
プロパティを iframe に追加して、Referer
ヘッダーを Google に送信することを明示的に許可します。
地図上に表示される広告
Maps Embed API には、地図上の広告を含めることができます。各地図に表示される広告フォーマットと広告セットは、予告なく変更される場合があります。
地図モードを選択する
リクエスト URL には、次のいずれかの地図モードを指定できます。
place
: ランドマーク、お店やサービス、地理的対象物、町など、特定の場所や住所にマップピンを表示します。view
: マーカーやルートのない地図を返します。directions
: 地図上の 2 つ以上の指定された地点間の経路と、距離と移動時間を表示します。streetview
: 指定された場所からのインタラクティブなパノラマビューを表示します。search
: 表示可能な地図領域の検索結果を表示します。
place
モード
次の URL では、place
地図モードを使用して、エッフェル塔に地図上のマーカーを表示しています。
https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
以下のパラメータを使用できます。
パラメータ | タイプ | 説明 | 指定可能な値 |
---|---|---|---|
q |
必須 | 地図上のマーカーの位置を定義します。 | URL エスケープされた場所の名前、住所、Plus Code、またはプレイス ID。
Maps Embed API は、スペースをエスケープする際に + と %20 の両方をサポートします。たとえば、「City Hall, New York, NY」は City+Hall,New+York,NY に変換し、Plus Code 「849VCWC8+R9」は 849VCWC8%2BR9 に変換します。 |
center |
任意 | 地図表示の中心を定義します。 | カンマ区切りの緯度と経度の値を指定できます(例: 37.4218,-122.0840 )。 |
zoom |
任意 | 地図の初期ズームレベルを設定します。 | 0 (全世界)から 21 (個々の建物)の範囲の値。上限は、選択した場所の地図データによって異なります。 |
maptype |
任意 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
任意 | UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者は母国語で地図を表示します。このパラメータは、一部の国のタイルでのみサポートされます。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルト言語が使用されます。 | |
region |
任意 | 地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。 | 地域コードは、一般的な ccTLD(「トップレベル ドメイン」)の 2 文字の値にマッピングされた 2 文字(非数値)の Unicode 地域サブタグとして指定されます。サポートされている地域については、Google Maps Platform のサポート状況をご覧ください。 |
view
モード
次の例では、view
モードとオプションの maptype
パラメータを使用して、地図の航空写真を表示しています。
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
以下のパラメータを使用できます。
パラメータ | タイプ | 説明 | 指定可能な値 |
---|---|---|---|
center |
必須 | 地図表示の中心を定義します。 | カンマ区切りの緯度と経度の値を指定できます(例: 37.4218,-122.0840 )。 |
zoom |
任意 | 地図の初期ズームレベルを設定します。 | 0 (全世界)から 21 (個々の建物)の範囲の値。上限は、選択した場所の地図データによって異なります。 |
maptype |
任意 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
任意 | UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者は母国語で地図を表示します。このパラメータは、一部の国のタイルでのみサポートされます。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルト言語が使用されます。 | |
region |
任意 | 地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。 | 地域コードは、一般的な ccTLD(「トップレベル ドメイン」)の 2 文字の値にマッピングされた 2 文字(非数値)の Unicode 地域サブタグとして指定されます。サポートされている地域については、Google Maps Platform のサポート状況をご覧ください。 |
directions
モード
次の例では、directions
モードを使用して、有料道路と高速道路を避けて、オスローとテレマーク(ノルウェー)、距離、移動時間を表示します。
https://www.google.com/maps/embed/v1/directions
?key=YOUR_API_KEY
&origin=Oslo+Norway
&destination=Telemark+Norway
&avoid=tolls|highways
以下のパラメータを使用できます。
パラメータ | タイプ | 説明 | 指定可能な値 |
---|---|---|---|
origin |
必須 | 経路を表示する出発地を定義します。 | URL エスケープされた場所の名前、住所、Plus Code、緯度と経度の座標、プレイス ID。
Maps Embed API は、スペースをエスケープする際に + と %20 の両方をサポートします。たとえば、「City Hall, New York, NY」は City+Hall,New+York,NY に変換し、Plus Code 「849VCWC8+R9」は 849VCWC8%2BR9 に変換します。 |
destination |
必須 | ルートの終点を定義します。 | URL エスケープされた場所の名前、住所、Plus Code、緯度と経度の座標、プレイス ID。
Maps Embed API は、スペースをエスケープする際に + と %20 の両方をサポートします。たとえば、「City Hall, New York, NY」は City+Hall,New+York,NY に変換し、Plus Code 「849VCWC8+R9」は 849VCWC8%2BR9 に変換します。 |
waypoints |
任意 | 出発地と目的地の間のルートの中継地を 1 つ以上指定します。 | 場所の名前、住所、または場所 ID。
複数の地点を指定するには、パイプ文字(|)を使用して場所を区切ります(例: Berlin,Germany|Paris,France )。最大 20 地点を指定できます。 |
mode |
任意 | 移動手段を定義します。モードが指定されていない場合、Maps Embed API は指定されたルートに最も関連性の高いモードを 1 つ以上表示します。 | driving 、walking (可能な限り歩行者専用道路と歩道を優先)、bicycling (可能な場合は自転車道と優先道路を経由する)、transit 、または flying 。 |
avoid |
任意 | ルート上で回避する対象物を指定します。ただし、制限対象の機能を含むルートが除外されるわけではありません。より好ましいルートにバイアスがかかります。 | tolls 、ferries 、highways 。複数の値はパイプ文字で区切ります(例: avoid=tolls|highways )。 |
units |
任意 | 結果に距離を表示する際に、測定方法(メートル法、またはヤード法)を指定します。units が指定されていない場合は、クエリの origin の国によって、使用する単位が決まります。 |
metric または imperial |
center |
任意 | 地図表示の中心を定義します。 | カンマ区切りの緯度と経度の値を指定できます(例: 37.4218,-122.0840 )。 |
zoom |
任意 | 地図の初期ズームレベルを設定します。 | 0 (全世界)から 21 (個々の建物)の範囲の値。上限は、選択した場所の地図データによって異なります。 |
maptype |
任意 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
任意 | UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者は母国語で地図を表示します。このパラメータは、一部の国のタイルでのみサポートされます。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルト言語が使用されます。 | |
region |
任意 | 地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。 | 地域コードは、一般的な ccTLD(「トップレベル ドメイン」)の 2 文字の値にマッピングされた 2 文字(非数値)の Unicode 地域サブタグとして指定されます。サポートされている地域については、Google Maps Platform のサポート状況をご覧ください。 |
streetview
モード
Maps Embed API を使用すると、サービス提供地域全体で、指定された場所からのストリートビュー画像をインタラクティブなパノラマとして表示できます。ユーザーが投稿した 360°写真やストリートビューのスペシャル コレクションも利用できます。
各ストリートビュー パノラマは、単一の場所からの 360 度ビューを提供します。画像は、360 度の水平ビュー(周囲全体)と 180 度の垂直ビュー(真上から真下)を含みます。streetview
モードでは、カメラが中央に配置された、生成されたパノラマを球体としてレンダリングするビューアを提供します。カメラを操作してズームとカメラの向きを制御できます。
次の streetview
モードのパノラマをご覧ください。
https://www.google.com/maps/embed/v1/streetview
?key=YOUR_API_KEY
&location=46.414382,10.013988
&heading=210
&pitch=10
&fov=35
次の URL パラメータのいずれかが必須です。
location
は、緯度と経度をカンマ区切り値(46.414382,10.013988
)で指定できます。API は、この場所に最も近い場所で撮影されたパノラマを表示します。ストリートビューの画像は定期的に更新され、毎回わずかに異なる位置から撮影されることがあるため、画像が更新されると、その場所が別のパノラマにスナップされる可能性があります。pano
は特定のパノラマ ID です。pano
を指定する場合は、location
も指定できます。location
は、API がパノラマ ID を見つけられない場合にのみ使用されます。
次の URL パラメータは省略可能です。
パラメータ | タイプ | 説明 | 指定可能な値 |
---|---|---|---|
heading |
任意 | カメラのコンパス方位を北から時計回りの度数で示します。 | -180°~ 360° の値 |
pitch |
任意 | は、カメラの角度(上または下)を指定します。正の値を指定するとカメラの角度が上がり、負の値を指定するとカメラの角度が下になります。デフォルトのピッチ 0° は、画像がキャプチャされたときのカメラの位置に基づいて設定されます。このため、ピッチ 0° は水平であることがよくありますが、常に水平とは限りません。たとえば、山で撮影された画像は、水平ではないデフォルトのピッチで表示される可能性があります。 | -90°~ 90° の値 |
fov |
任意 | 画像の水平画角を決定します。デフォルトは 90° です。固定サイズのビューポートを処理する場合、画角はズームレベルと見なされ、数値が小さいほどズームレベルが高くなります。 | 度単位(10°~ 100° の範囲) |
center |
任意 | 地図表示の中心を定義します。 | カンマ区切りの緯度と経度の値を指定できます(例: 37.4218,-122.0840 )。 |
zoom |
任意 | 地図の初期ズームレベルを設定します。 | 0 (全世界)から 21 (個々の建物)の範囲の値。上限は、選択した場所の地図データによって異なります。 |
maptype |
任意 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
任意 | UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者は母国語で地図を表示します。このパラメータは、一部の国のタイルでのみサポートされます。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルト言語が使用されます。 | |
region |
任意 | 地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。 | 地域コードは、一般的な ccTLD(「トップレベル ドメイン」)の 2 文字の値にマッピングされた 2 文字(非数値)の Unicode 地域サブタグとして指定されます。サポートされている地域については、Google Maps Platform のサポート状況をご覧ください。 |
search
モード
Search
モードでは、表示可能な地図領域の検索結果が表示されます。検索対象の地域を定義することをおすすめします。検索語句に地域を含める(record+stores+in+Seattle
)か、center
パラメータと zoom
パラメータを含めて検索をバインドします。
https://www.google.com/maps/embed/v1/search
?key=YOUR_API_KEY
&q=record+stores+in+Seattle
以下のパラメータを使用できます。
パラメータ | タイプ | 説明 | 指定可能な値 |
---|---|---|---|
q |
必須 | 検索キーワードを定義します。 | in+Seattle や near+98033 などの地理的制限を含めることができます。 |
center |
任意 | 地図表示の中心を定義します。 | カンマ区切りの緯度と経度の値を指定できます(例: 37.4218,-122.0840 )。 |
zoom |
任意 | 地図の初期ズームレベルを設定します。 | 0 (全世界)から 21 (個々の建物)の範囲の値。上限は、選択した場所の地図データによって異なります。 |
maptype |
任意 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
任意 | UI 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者は母国語で地図を表示します。このパラメータは、一部の国のタイルでのみサポートされます。リクエストされた特定の言語がタイルセットでサポートされていない場合は、そのタイルセットのデフォルト言語が使用されます。 | |
region |
任意 | 地政学的な配慮に基づいて、表示する適切な境界とラベルを定義します。 | 地域コードは、一般的な ccTLD(「トップレベル ドメイン」)の 2 文字の値にマッピングされた 2 文字(非数値)の Unicode 地域サブタグとして指定されます。サポートされている地域については、Google Maps Platform のサポート状況をご覧ください。 |
プレイス ID パラメータ
Maps Embed API では、場所の名前や住所を指定する代わりに、プレイス ID を使用できます。プレイス ID は、場所を一意に識別する安定した方法です。詳しくは、Google Places API のドキュメントをご覧ください。
Maps Embed API では、次の URL パラメータのプレイス ID を使用できます。
q
origin
destination
waypoints
プレイス ID を使用するには、まず接頭辞 place_id:
を追加する必要があります。次のコードでは、ルート リクエストの出発地としてニューヨーク市庁舎を指定しています: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8
。
radius
は、パノラマを検索する半径をメートル単位で設定します。半径は指定された緯度と経度を中心とします。有効な値は正の整数です。デフォルト値は 50。source
では、ストリートビューの検索対象を選択したソースに限定します。指定できる値は次のとおりです。default
: ストリートビューのデフォルトのソースを使用します。検索対象が特定のソースに限定されません。outdoor
では、検索対象を屋外のコレクションのみに限定します。屋内のコレクションは検索結果に含まれません。指定された場所の屋外のパノラマが存在しない場合があります。また、検索では、屋内か屋外かを判断できるパノラマのみが返されます。たとえば、PhotoSphere は屋内か屋外かが不明なため、返されません。