您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps Embed API

為協助您開始,我們將先引導您使用 Google Developers Console 來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps Embed API
  3. 建立適當的金鑰
繼續

Google Maps Embed API

總覽

Google Maps Embed API 可讓您透過簡單的 HTTP 要求在您的網站上放置互動式地圖或街景服務的全景相片。 將 Google Maps Embed APIURL 設定為 iframe 的 src 屬性,就能輕易內嵌在您的網頁或部落格:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

專為您建置的地圖

您網站的每位訪客都會看到為他們量身訂做的「Google 地圖」。 如果以 Google 帳戶登入,他們儲存的地點、住家與公司位置等都會建置在所見的地圖中。

這也表示會儲存與地圖的互動(例如用星號標出位置),以便在電腦或行動裝置的「Google 地圖」中檢視。

其他使用者無法看見這些使用者特定的詳細資料。 每位訪客都會看到專為他們建置的地圖。

嵌容易

Google Maps Embed API 地圖可輕易新增至您的網頁 — 只要將您建置的 URL 設定為 iframe 的 src 屬性值。 使用 iframe 的 heightwidth 屬性控制地圖的大小。 不需要使用 JavaScript。

沒有使用限制

Google Maps Embed API 並沒有使用限制。 您可以在高流量網站上內嵌地圖或街景服務的全景相片,完全不必擔心會達到使用量上限或每秒查詢量節流處理限制。

地圖上的廣告

Google Maps Embed API 可以包括地圖上的廣告。 在任何指定地圖中顯示的廣告格式與廣告組,如有變更將不另行通知。

形成 URL

Google Maps Embed API 要求的 URL 如下:

https://www.google.com/maps/embed/v1/MODE?key=YOUR_API_KEY&parameters

其中:

  • {MODE}placedirectionssearchviewstreetview 之一。
  • {YOUR_API_KEY} 是您的免費 API 金鑰。
  • parameters 包括選擇性參數以及模式特定的參數。

API 金鑰

Google Maps Embed API 的所有要求都必須包括免費的 API 金鑰,當成 key 參數的值。 您的金鑰可讓您監視應用程式的 Maps API 使用情形,以及確保 Google 可以視需要就您的網站/應用程式相關問題與您聯絡。

若要開始使用 Google Maps Embed API, 請按一下下方按鈕,它將自動啟用 Google Maps Embed API 並取得 API 金鑰。

取得金鑰

或者,您也可以依照這些步驟取得 API 金鑰:

  1. 前往 Google API Console
  2. 建立或選取專案。
  3. 按一下 [Continue] 以啟用 API。
  4. 憑證頁面上,取得 API 金鑰 (並設定 API 金鑰限制)。
    注意:如果您有現有的不受限制 API 金鑰,或具有瀏覽器限制的金鑰,您可以使用該金鑰。
  5. 我們建議您依照這些最佳做法來保護您的 API 金鑰


在 Google API Console 中,您也可以查詢現有金鑰檢視已啟用的 API 清單

如需有關使用 Google API Console 的詳細資訊,請參閱 API Console 說明

API 金鑰限制的類型

Google Maps API 適用於 Android 或 iOS 應用程式、網頁瀏覽器,而且可透過 HTTP Web 服務使用。任何平台中的 API 都可以使用一般(不受限制)API 金鑰。您可以選擇性地新增限制(例如 HTTP 參照網址)到 API 金鑰。完成限制之後,金鑰就只能在支援該限制類型的平台上執行。深入了解金鑰和憑證

地圖模式

共有四個地圖內嵌模式可以使用。 請以要求 URL 指定模式。

地點模式

Place 模式會在特定地點或地址例如地標、商家、地理特徵或城鎮)顯示地圖釘。

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

下列是必要的 URL 參數:

  • q 定義要在地圖上著重展示的地點。 它接受以地點名稱、地址或地點 ID 形式指定的位置。 字串應該要溢出 URL,因此像是 "City Hall, New York, NY" 的地址應該轉換為 City+Hall,New+York,NY。 (溢出空格時,Google Maps Embed API 支援 +%20)。 地點 ID 前面應該加上place_id:

儲存的屬性

登入 Google 帳戶的使用者能夠儲存透過 q 參數表示的地點。 在網頁版或行動裝置的其他 Google 地圖上都可以看見儲存的地點。 根據預設,從內嵌地圖儲存的地點將會包括資料引用標示資訊,提醒使用者儲存那個地點時身在何處。

您可以使用下列參數將資料引用標示個人化。

  • attribution_source 可以設定儲存到您網站或應用程式的屬性。 您必須先包括自訂的 attribution_source,才能設定 attribution_web_urlattribution_ios_deep_link_id。 預設為會顯示地圖的網頁 URL 路徑,例如:

https://example.com/path/ * attribution_web_url 指定可返回您網站的連結。 如果未指定 attribution_sourceattribution_web_url 預設為會顯示內嵌地圖的 URL,例如:

https://example.com/path/page.html * attribution_ios_deep_link_id 指定的 URL 配置提供連至 iOS 應用程式的深層連結。 在 Google Maps for iOS 上檢視時,attribution_ios_deep_link_id 將會顯示在 attribution_web_url 的位置。

下列範例會在卑詩省維多利亞的 Empress Hotel 顯示圖釘。 儲存此位置會設定儲存到 "Google Maps Embed API" 的屬性。 資料引用標示會顯示為 URL。 範例使用 Google 地圖 URL 配置,向 iOS 使用者提供開車路線。

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Fairmont+Empress,Victoria+BC
  &attribution_source=Google+Maps+Embed+API
  &attribution_web_url=http://www.fairmont.com/empress-victoria/
  &attribution_ios_deep_link_id=comgooglemaps://?daddr=Fairmont+Empress,+Victoria,+BC

路線規劃模式

Directions 模式會顯示地圖上兩點或更多指定點之間的路徑,以及距離和旅行時間。

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

下列是必要的 URL 參數:

  • origin 定義所顯示路線的起點。 值可以是地點名稱、地址或地點 ID

字串應該要溢出 URL,因此像是 "City Hall, New York, NY" 的地址應該轉換為 City+Hall,New+York,NY。 (溢出空格時,Google Maps Embed API 支援 +%20)。

地點 ID 前面應該加上 place_id:。 * destination 定義路線的終點。

下列是選擇性的 URL 參數:

  • waypoints 指定一或多個中間地點,安排起點與目的地之間一路上的路線。 使用縱線字元|)來分隔地點(例如,Berlin,Germany|Paris,France),即可指定多個途經地點。 您最多可以指定 20 個途經地點。 每個途經地點可以是地點名稱、地址或地點 ID。

  • mode 定義旅行方式。 選項有 drivingwalking 偏好行經可用的人行道)、bicycling 行經可用的單車路徑與偏好街道)、transitflying。 如果未指定任何旅行方式,會針對指定路線 Google Maps Embed API 顯示一或多種最相關的旅行方式。

  • avoid 會指示「Google 地圖」避開 tollsferries 和/或 highways。 以縱線字元分隔多個值(例如, avoid=tolls|highways)。 注意:這不會將包括限制特徵的路線排除,只是會將結果調整為更適合的路線。

  • units 指定結果中顯示的距離採用 metricimperial 單位。 如果未指定 units,會依據查詢的 origin 國家/地區決定採用的單位。

搜尋模式

Search 模式顯示在可見地圖區域搜尋後的結果。 建議您定義搜尋的位置,方法是在搜尋字詞中包括位置record+stores+in+Seattle),或包括 centerzoom 參數,以劃定搜尋範圍。

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

下列是必要的 URL 參數:

  • q 指定搜尋字詞。 它可以包括地理限制,例如 in+Seattlenear+98033

檢視模式

View 模式會傳回沒有標記或路線的地圖。

下列範例會使用選擇性的 maptype 參數來顯示衛星檢視的地圖。

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

下列是必要的 URL 參數:

  • center 定義地圖視窗中心,並接受以逗號分隔的緯度與經度值 (-33.8569,151.2152)。

選擇性參數

下列選擇性參數可以搭配上面列出的任何地圖模式使用。

  • center 定義地圖檢視的中心。 接受以逗號分隔的緯度與經度值(例如 37.4218,-122.0840)。

  • zoom 設定初始地圖縮放層級。 接受從 0 (全世界)到 21(個別建築物)的值範圍。 上限會因選取位置的可用地圖資料而有所不同。

  • maptype 可以是 roadmap (預設)或 satellite,並會定義要載入的地圖方塊類型。

  • language 定義 UI 元素以及地圖方塊上顯示的標籤要使用的語言。 請注意,只有某些國家/地區地圖方塊才支援此參數;如果地圖方塊集不支援要求的特定語言,將會使用該地圖方塊集的預設語言。 根據預設,訪客會看到採用他們語言的地圖。

  • region 會根據地緣政治敏感度,定義要顯示的適當邊界與標籤。 接受地區代碼(以兩字元的 ccTLD(頂層地區)值方式指定)。

地點 ID 參數

Google Maps Embed API 支援使用地點 ID,而不是提供地點名稱或地址。 地點 ID 可做為地點的唯一識別資訊。 如需關於如何尋找和使用地點 ID 的詳細資訊,請參閱 Google Places API 文件

Google Maps Embed API 接受將地點 ID 用於下列 URL 參數:

  • q

  • origin

  • destination

  • waypoints

如果要使用地點 ID,您必須先新增前置詞 place_id:。 下列程式碼將紐約市政廳指定為路線規劃的起點 request: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8

街景服務模式

Google Maps Embed API 可讓您在網站或部落格將「街景服務」影像顯示為互動式全景。 「Google 街景服務」提供指定位置整個涵蓋區域的全景檢視。 也可以使用使用者所提供的球形影像街景服務特殊集合

每個「街景服務」全景都提供單一位置的完整 360 度檢視。 影像包含 360 度的水平檢視(全方位環繞)以及 180 度垂直檢視(垂直上下)。 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。 只有在 API 找不到全景 ID 時才會使用 location

下列是選擇性的 URL 參數:

  • heading 會以從北方順時針旋轉的角度指出相機指南針所指的方向。 可接受從 -180° 到 360° 的值。

  • pitch 指定相機往上或往下的角度。 pitch 是以 -90° 到 90° 的角度指定。 正值會提升相機角度,而負值會降低相機角度。 根據拍攝影像時的相機位置,設定為 0° 的預設傾斜角度。 因此,傾斜角度經常是 0°,但視角並非總是呈水平。 例如,在山丘上拍到的影像可能會展示不是水平視角的預設傾斜。

  • fov 決定影像的水平視野。 視野是以度數來表示,範圍為 10° - 100°。 預設為 90°。 處理固定大小的檢視點時,視野可以視為縮放層級,值越小,縮放層級就越高。

  • language 定義 UI 元素與標籤要使用的語言。 根據預設,訪客會看到採用他們語言的 UI 元素。

  • region 會根據地緣政治敏感度,定義要顯示的適當邊界與標籤。 接受地區代碼(以兩字元的 ccTLD (頂層地區)值方式指定)。

內嵌地圖

如果要您的網頁上使用 Google Maps Embed API,可將您建置的 URL 設定為 iframe 的 src 屬性值。 使用 iframe 的heightwidth 屬性控制地圖的大小。

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&q=record+stores+in+Seattle" allowfullscreen>
</iframe>

祕訣:將 allowfullscreen 加入您的 iframe 屬性,以允許特定地圖部分以全螢幕呈現。

祕訣frameborder="0"style="border:0" 屬性會移除地圖周圍的標準 iframe 邊界。

您可以依照自己的網站結構與設計來調整 iframe 的大小,但我們發現訪客通常認為與較大的地圖互動比較輕鬆。

請注意,無法在低於 200px 的尺寸大小支援內嵌地圖。

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps Embed API
Google Maps Embed API
需要協助嗎?請前往我們的支援網頁