地図の埋め込み

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

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 を使用するには、 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 プロパティ。
  • 標準プロパティを削除する frameborder="0" プロパティと style="border:0" プロパティ 地図の周囲から iframe の枠線を引くことができます。
  • referrerpolicy="no-referrer-when-downgrade" プロパティ: リクエストとともに完全な URL を Referer ヘッダーとして送信するため、 API キーの制限は正常に機能する可能性があります。

iframe のサイズは、ウェブサイトの構造やデザインに合わせて変更できます。 一般に、訪問者はより大きな地図を操作しやすいと感じています。 なお、埋め込み地図は、 あります。

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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
region 省略可 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です 2 文字（数値以外）の地域コードを指定できます 一般的な ccTLD（「トップレベル ドメイン」）への 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
region 省略可 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です 2 文字（数値以外）の地域コードを指定できます 一般的な ccTLD（「トップレベル ドメイン」）への 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）Google Chat では 最大 20 個のウェイポイントを指定できます。
mode 省略可 移動手段を定義します。モードが指定されていない場合は、 Maps Embed API は、イベント内容に最も関連するモードを 1 つ以上表示します ルートの 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
region 省略可 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です 2 文字（数値以外）の地域コードを指定できます 一般的な ccTLD（「トップレベル ドメイン」）への Unicode 地域のサブタグ マッピング 使用できます。Google Maps Platform をご覧ください。 サポート対象地域の詳細をご覧ください。

streetview モード

Maps Embed API を使用すると、ストリートビューの画像を Google Cloud Platform 上の指定された場所からの インタラクティブなパノラマ画像 カバレッジ エリア。ユーザー 投稿した 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 です。Pod の pano: location を指定することもできます。「 location は、API がパノラマを検出できない場合にのみ使用されます。 あります。

次の 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
region 省略可 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です 2 文字（数値以外）の地域コードを指定できます 一般的な ccTLD（「トップレベル ドメイン」）への 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
region 省略可 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です 2 文字（数値以外）の地域コードを指定できます 一般的な ccTLD（「トップレベル ドメイン」）への Unicode 地域のサブタグ マッピング 使用できます。Google Maps Platform をご覧ください。 サポート対象地域の詳細をご覧ください。

プレイス ID パラメータ

Maps Embed API では、 場所の名前や住所を入力します。プレイス ID を使用すると、 特定します。詳しくは、Google Places API のドキュメントをご覧ください。

Maps Embed API は、以下の URL のプレイス ID に対応しています。 parameters:

  • q
  • origin
  • destination
  • waypoints

プレイス ID を使用するには、まず接頭辞 place_id: を追加する必要があります。「 次のコードは、ニューヨーク市役所をルートの出発地として指定します。 リクエスト: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8。

  • radius は、検索対象の半径をメートル単位で設定します。 指定された緯度と経度を中心とするパノラマ。有効な値 0 または正の整数です。デフォルト値は 50。

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

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