地図の埋め込み

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

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 を使用すると、対象地域内の指定された場所のストリートビュー画像をインタラクティブなパノラマとして表示できます。ユーザー作成のフォトスフィアやストリートビューのスペシャル コレクションも利用できます。

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