地図の埋め込み

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

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 に変換し、「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 に変換し、「849VCWC8+R9」は 849VCWC8%2BR9 に変換します。
destination 必須 ルートの終点を定義します。 URL エスケープされた場所の名前、住所、Plus Code、緯度と経度の座標、またはプレイス ID。Maps Embed API では、スペースをエスケープする際に + と %20 の両方がサポートされます。たとえば、「City Hall, New York, NY」は City+Hall,New+York,NY に変換し、「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 は、パノラマを検索する半径（メートル単位）を設定します。指定された緯度と経度を中心とした半径になります。有効な値は 0 または正の整数です。デフォルト値は 50。

  • source は、ストリートビューの検索を選択したソースに限定します。指定できる値は次のとおりです。

    • default は、ストリートビューのデフォルトのソースを使用します。検索対象が特定のソースに限定されません。
    • outdoor では、検索対象を屋外のパノラマのみに限定します。屋内コレクションは検索結果に含まれません。なお、指定された場所の屋外のパノラマが存在しない場合があります。また、検索では、屋内か屋外かを判断できるパノラマのみが返されます。たとえば、PhotoSphere は、屋内か屋外かが不明なため、返されません。