地図の埋め込み

このガイドでは、ウェブページにインタラクティブな地図を埋め込む方法について説明します。

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
  &center=-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 は屋内か屋外かが不明なため、返されません。