地図を埋め込む

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

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

iframe のサイズは、ウェブサイトの構造とデザインに合わせて変更できますが、一般的に、サイト訪問者にとっては地図が大きいほど操作しやすくなります。埋め込み地図は、いずれかのディメンションが 200 px 未満の場合、対象外となります。

API キーの制限

ホスト ウェブサイトの referrer メタタグが no-referrer または same-origin に設定されている場合、ブラウザは Referer ヘッダーを Google に送信しません。これにより、API キーの制限によってリクエストが拒否される可能性があります。制限を正しく機能させるには、上記の例のように、iframe に referrerpolicy プロパティを追加して、Referer ヘッダーを Google に送信することを明示的に許可します。

地図モードを選択する

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