地図の埋め込み

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

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 プロパティ: マップの特定部分を画面全体に表示できるようにします。
  • 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 エスケープされたプレイス名、住所、プラスコード、プレイス 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 エンコードされた地名、住所、プラスコード、緯度と経度の座標、プレイス 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 は、屋内か屋外かが不明なため、返されません。