地図の埋め込み

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

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 エスケープされた地名、住所、プラスコード、緯度と経度の座標、プレイス 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 を使用すると、対象地域全体について、指定した位置からストリートビューの画像をインタラクティブなパノラマとして表示できます。ユーザーから提供された Photo Sphere やストリートビューの特別なコレクションも利用できます。

各ストリートビューのパノラマ画像は、単一地点からの 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 は、検索対象を屋外のパノラマのみに限定します。屋内コレクションは検索結果に含まれません。なお、指定された場所の屋外のパノラマが存在しない場合があります。また、検索結果には、屋内と屋外のどちらであるかを判断できるパノラマのみが返されます。たとえば、屋内と屋外のどちらであるか不明であるため、フォトスフィアは返されません。