天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

Google Map如何嵌入網頁?地圖、路線地圖嵌入教學|天矽科技客製化網頁設計

部落格:Google Map如何嵌入網頁?地圖、路線地圖嵌入教學|天矽科技客製化網頁設計

 

目錄
Google地圖嵌入網頁
Goolge路線地圖嵌入網頁

 

將Google地圖嵌入網頁,可以讓整篇文章圖文並茂,並且讓使用者更加清楚路線與座標,那麼要如何嵌入Google Map到網頁呢?其實非常簡單喔!

 

 在網站上撰寫文章時,通常都會附上圖文並茂的註解與裝飾,尤其是寫到地址時,就會想要將最具指標性的Google Map地圖嵌入文章中,那麼要如何嵌入呢?

步驟導覽
Step1. 找到地點
Step2. 點選左側選單
Step3. 點選「分享或嵌入地圖」
Step4. 點選嵌入地圖
Step5. 選擇大小後複製HTML
Step6. 開啟部落格編輯器原始碼
Step7. 完成

 

Step1. 找到地點

首先先到 Google 搜尋引擎 或直接在 Google Map 輸入你要嵌入的地址或地點。

找到地點

 

Step2. 點選左側選單

點選左側選單

 

Step3. 點選「分享或嵌入地圖」

點選「分享或嵌入地圖」或是點選「路線規劃那一條快捷鍵icon」中的「分享」也可以;若是要嵌入實際的街景畫面,就請到實際畫面中點選項目中的「分享或嵌入圖片」。

分享或嵌入地圖

▲ 嵌入平面地圖

分享或嵌入圖片

▲ 嵌入實際街景地圖

 

Step4. 點選嵌入地圖

嵌入地圖的方式,無論是實際的街景畫面還是一般的平面地圖都一樣喔!

嵌入地圖

▲ 嵌入平面地圖

嵌入地圖

▲ 嵌入實際街景地圖

 

Step5. 選擇大小後複製HTML

在複製HTML前,可以選擇地圖的大小。
我們可自訂尺寸,若要先看大小是否符合預期,可點擊右側的「預覽實際大小」進行查看,當然也可以選擇Google幫你預設的小、中、大尺寸。

自訂大小

 

Step6. 開啟部落格編輯器原始碼

在部落格找到「原始碼」按鈕切換編輯模式,這個功能無論是在哪個部落格都能找到,如果找不到,看看編輯器中有沒有像</>這樣的符號?這是原始碼、程式碼的ICON,若是使用WordPress則可在左側功能中的WIDGETS項目找到「自訂HTML」。

找到原始碼按鈕

▲ 找到原始碼按鈕

痞客幫原始碼按鈕

▲ 痞客幫 原始碼按鈕

wordpress原始碼按鈕

▲ WordPress原始碼按鈕

 

Step7. 完成

找到後,將剛剛複製的代碼貼上,再回去點選「原始碼」按鈕關閉,即可看到地圖;將文章儲存後回到前台,即可看到我們剛剛嵌入的Google Map囉!

關閉原始碼

▲ 後台編輯器預覽畫面

前台原始碼

▲ 前台儲存後顯示畫面



▲ 實際畫面

 

 

 單純的嵌入地圖還不夠!想要在地圖標示「如何從某知名地標前往目的地」要怎麼做呢?只能使用圖片繪製嗎?其實利用Google Map也能將路徑顯示並嵌入我們的網頁中,讓使用者更清楚如何前往該處!

 下方是舉例如何從南港展覽館到天矽科技,當然我們也可以不要設定這麼長遠的距離,像是可以設定「如何從XX捷運站到目的地」這種短距離標示也是OK的。

步驟導覽
Step1. 進入Google地圖
Step2. 進入My Maps建立新地圖
Step3. 新增圖層、路線
Step4. 新增A、B兩端地點
Step5. 新增標記、丈量距離
Step6. 分享地圖
Step7. 回到地圖畫面點選嵌入我的網站
Step8. 複製HTML語法
Step9. 嵌入到編輯器中
Step10. 完成

 

Step1. 進入Google地圖

開啟【我的地圖】並點擊開始使用。 

進入Google地圖

 

Step2. 進入My Maps建立新地圖

建立新地圖

 

Step3. 新增圖層、路線

除此之外,我們還可以在下方的「基本地圖」中切換地圖風格,選擇自己想要呈現的地圖樣式喔!

新增圖層與路線

 

Step4. 新增A、B兩端地點

除了A、B兩端,還可以再設定第三個以上的目的地。
另外我們也可以在此上方選擇交通工具,選項為開車、單車或步行。

新增AB兩端

 

Step5. 新增標記、丈量距離

直接在上方表格輸入目標地點,即可插入螢光綠色的標記,讓座標更清楚。

如果想要知道A、B兩端的距離,可以利用上方的「測量距離和區域」的功能來了解喔!

獲得地標

▲ 插入標記

測量距離

▲ 測量兩地距離

 

Step6. 分享地圖

若在一開始沒有填寫地圖的名稱與說明,在點選分享時,就會要求我們先將此填寫完畢喔!

分享地圖

在分享地圖時,預設模式都不會將連結打開,也就是預設都是私人的模式,我們要開啟「知道這個連結的人都可以查看」與「讓其他使用者能在網路上搜尋及找到這份地圖」這兩個選項。另外,我們也可以決定是否要「讓其他使用者可以在地圖上看到你的名稱和相片」。

設定完畢後,按下關閉即可。

分享地圖

 

Step7. 回到地圖畫面點選嵌入我的網站

嵌入我的網站

 

Step8. 複製HTML語法

點選嵌入我的網站後,即可看到「嵌入這個地圖」的對話框,裡面有一串HTML語法代碼,將此複製後貼到編輯器當中。

複製語法

 

Step9. 嵌入到編輯器中

嵌入方式跟上面一樣,我們將語法貼到編輯器當中並儲存,即可在前台看到畫面囉!

嵌入到編輯器中

 

Step10. 完成

完成之後,我們就可以在前台發現我們剛剛嵌入的路線地圖,使用者可以點擊A端或B端,地圖就會顯示該地點的資訊,還可以透過右上方的放大選項進入我們的地圖當中,看到更加詳細的地圖資訊。

點擊後出現的資訊

顯示地圖詳細資訊

 

以上就是如何將Google Map嵌入到網站的效果囉!顯示效果如下:

 

延伸閱讀:Google Maps API 嵌入方式教學篇

 

回上一頁
信箱
客服
Line@