地図の埋め込み

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

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" プロパティ: ブラウザがリクエストに Referer ヘッダーとして完全な URL を送信できるようにし、API キーの制限が正しく機能できるようにします。

iframe のサイズは、ウェブサイトの構造やデザインに合わせて変更できます。 一般に、訪問者はより大きな地図を操作しやすいと感じています。 高さや幅が 200 ピクセルのサイズより小さい埋め込みマップはサポートされていないことに注意してください。

API キーの制限

ホスト ウェブサイトの referrer メタタグが no-referrer または same-origin に設定されている場合、ブラウザは Referer ヘッダーを Google に送信しません。この API キーの制限が原因で発生する リクエストを拒否できます。制限が適切に機能するようにするには、上記の例のように iframe に referrerpolicy プロパティを追加して、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 に、プラスコード「849VCWC8+R9」は 849VCWC8%2BR9 に変換します。
destination 必須 ルートの終点を定義します。 URL エンコードされた地名、住所、プラスコード、緯度と経度の座標、プレイス 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 要素と、マップタイルのラベルの表示に使用する言語を定義します。デフォルトでは、訪問者が使用する言語でマップが表示されます。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。
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 省略可 地政学的区別に基づいて、表示する境界やラベルを適切に定義します。 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 は、検索対象の半径をメートル単位で設定します。 指定された緯度と経度を中心とするパノラマ。有効な値は正の整数です。デフォルト値は 50。

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

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