このガイドでは、インタラクティブな地図をウェブページに埋め込む方法について説明します。
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"
プロパティ: リクエストとともに完全な URL をReferer
ヘッダーとして送信するため、 API キーの制限は正常に機能する可能性があります。
iframe のサイズは、ウェブサイトの構造やデザインに合わせて変更できます。 訪問者はより大きな地図を操作しやすいと感じることがわかっています。 なお、埋め込み地図は、 あります。
API キーの制限
ホスティング ウェブサイトで referrer
メタタグが no-referrer
または
same-origin
の場合、ブラウザは Referer
ヘッダーを Google に送信しません。この
API キーの制限が原因で発生する
リクエストを拒否できます。制限が適切に機能するように、
上記の例のように、referrerpolicy
プロパティを iframe に設定して、
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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。 | |
region |
省略可 | 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です | 2 文字(数値以外)の地域コードを指定できます 一般的な ccTLD(「トップレベル ドメイン」)への Unicode 地域のサブタグ マッピング 使用できます。Google Maps Platform をご覧ください。 サポート対象地域の詳細をご覧ください。 |
view
モード
次の例では、view
モードとオプションの maptype
パラメータを使用して、
地図の航空写真を表示する:
https://www.google.com/maps/embed/v1/view
?key=YOUR_API_KEY
¢er=-33.8569,151.2152
&zoom=18
&maptype=satellite
以下のパラメータを使用できます。
パラメータ | 型 | 説明 | 有効な値 |
---|---|---|---|
center |
必須 | 地図ビューの中心を定義します。 | 緯度と経度の値をカンマで区切って指定できます。次に例を示します。
37.4218,-122.0840 。 |
zoom |
省略可 | 地図の初期ズームレベルを設定します。 | 0 (世界全体)~21 の範囲の値
(個々の建物)。上限は地図データによって異なる場合があります
選択することもできます。 |
maptype |
省略可 | 読み込む地図タイルのタイプを定義します。 | roadmap (デフォルト)または satellite |
language |
省略可 | UI 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。 | |
region |
省略可 | 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です | 2 文字(数値以外)の地域コードで指定します。 一般的な ccTLD(「トップレベル ドメイン」)への 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 、または Plus Code 「849VCWC8+R9」から
849VCWC8%2BR9 。 |
destination |
必須 | ルートの終点を定義します。 | URL エスケープされた場所の名前、住所、Plus Code、緯度と経度
座標、プレイス 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。 | |
region |
省略可 | 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です | 2 文字(数値以外)の地域コードを指定できます 一般的な ccTLD(「トップレベル ドメイン」)への Unicode 地域のサブタグ マッピング 使用できます。Google Maps Platform をご覧ください。 サポート対象地域の詳細をご覧ください。 |
streetview
モード
Maps Embed API を使用すると、ストリートビューの画像を Google Cloud Platform 上の指定された場所からの インタラクティブなパノラマ画像 カバレッジ エリア。ユーザー 投稿した 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 です。Pod のpano
:location
を指定することもできます。「location
は、API がパノラマを検出できない場合にのみ使用されます。 あります。
次の 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 要素と UI 要素の表示に使用する言語を定義します。 マップタイル上のラベルです。デフォルトでは、訪問者には地図が公開されます あります。このパラメータは、一部の国のタイルでのみサポートされています。もし リクエストした特定の言語がタイル セットでサポートされていない場合、 そのタイルセットのデフォルトの言語が使用されます。 | |
region |
省略可 | 基準に基づいて、表示する適切な境界線とラベルを定義します。 地政学的に敏感です | 2 文字(数値以外)の地域コードを指定できます 一般的な ccTLD(「トップレベル ドメイン」)への 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 要素と 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
は、検索対象の半径をメートル単位で設定します。 指定された緯度と経度を中心とするパノラマ。有効な値 0 または正の整数です。デフォルト値は 50。source
は、ストリートビューの検索を選択したソースに限定します。指定できる値は次のとおりです。default
は、ストリートビューのデフォルトのソースを使用します。検索数 特定のソースに限定されませんoutdoor
では、検索対象を屋外のコレクションに限定します。屋内用 コレクションは検索結果に含まれません。屋外のパノラマ画像は 指定した場所には存在しない可能性があります。また 検索のみが可能なため は、屋内かどうかを判断できるパノラマを返します。 屋外です。たとえば、PhotoSpheres は不明なため、返されません 屋内でも屋外でもかまいません。