選單

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

Google Maps 地圖一直是我搜尋路線、尋找目的地和導航的首選,透過 Google 地圖搜尋功能可以很快、很準確地找到我要找的地標,搭配上 Google 街景功能,讓我在出發至目的地前能預知附近景觀,而不會到了現場還找不到位置。在手機應用程式甚至能夠提供即時的交通資訊,來預先計算到達目的地時間,並引導我走更快、更不會塞車的路線,相當方便。

對於公司或店面網站、部落格來說,可以考慮把 Google 地圖直接內嵌到網頁裡,如此一來就能提供客戶更易用、易懂的線上地圖,不需讓使用者自行查詢,新版 Google 地圖本身就能產生嵌入程式碼,不過僅限於一般地圖。

國外有開發者透過 API 來開發出能嵌入 Google 街景功能,若你覺得提供 Google 地圖仍不夠準確,還能考慮把 Google 街景直接內嵌到網頁,讓客戶在到達前能夠預先知道附近街景,相較於一般地圖來說,Google 街景也是提供方向指引的一個好方法。

網站名稱:Embed Google Maps
網站鏈結:https://ctrlq.org/maps/embed/

如何將一般地圖內嵌至網頁、部落格?

Step 1

開啟 Google 地圖(https://www.google.com/maps/)後,先利用上方搜尋框,來找到要顯示的位置,點選右上角的「齒輪」,找到「分享和嵌入地圖」功能。

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

Step 2

將上方標籤切換至「嵌入地圖」,即可找到以 iframe 語法來內嵌地圖的程式碼,使用者能依照自己的需求,調整地圖大小,共有三種尺寸及自訂大小可以選擇。

把程式碼複製、貼入網頁或部落格,就能在頁面裡顯示地圖。

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

如何將 Google 地圖街景內嵌至網頁、部落格?

Step 1

開啟 Embed Google Maps(https://ctrlq.org/maps/embed/)網頁,一樣透過左上角的搜尋框,找到你要顯示街景的地圖位置。

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

Step 2

點選左側的黃色小人,將它拖曳至地圖裡要顯示街景的位置,如果要顯示的地區已經有街景資料,Google Maps 上道路會顯示為藍色,若顯示為白色則表示沒有街景資料。

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

Step 3

開啟 Google Maps 街景後,把街景拖曳到你要嵌入的位置、角度及大小,從左下角就能找到 iframe 內嵌語法。

因為目前 Google Maps 新版地圖還沒辦法在街景產生內嵌程式碼,若要把街景嵌入網站裡,就必須透過 Embed Google Maps 網站來產生程式碼。

如何將 Google Maps 新版地圖、街景嵌入網頁或部落格?

嵌入後的範例如下:

分享本文