Google地圖嵌入網站
Google Map如何嵌入網頁？地圖、路線地圖嵌入教學｜天矽科技客製化網頁設計
目錄
➤ Google地圖嵌入網頁
➤ Goolge路線地圖嵌入網頁
Google地圖嵌入網頁
在網站上撰寫文章時，通常都會附上圖文並茂的註解與裝飾，尤其是寫到地址時，就會想要將最具指標性的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原始碼按鈕
Step7. 完成
找到後，將剛剛複製的代碼貼上，再回去點選「原始碼」按鈕關閉，即可看到地圖；將文章儲存後回到前台，即可看到我們剛剛嵌入的Google Map囉！
▲ 後台編輯器預覽畫面
▲ 前台儲存後顯示畫面
▲ 實際畫面
Goolge路線地圖嵌入網頁
單純的嵌入地圖還不夠！想要在地圖標示「如何從某知名地標前往目的地」要怎麼做呢？只能使用圖片繪製嗎？其實利用Google Map也能將路徑顯示並嵌入我們的網頁中，讓使用者更清楚如何前往該處！
下方是舉例如何從南港展覽館到天矽科技，當然我們也可以不要設定這麼長遠的距離，像是可以設定「如何從XX捷運站到目的地」這種短距離標示也是OK的。
步驟導覽
Step1. 進入Google地圖
Step2. 進入My Maps建立新地圖
Step3. 新增圖層、路線
Step4. 新增A、B兩端地點
Step5. 新增標記、丈量距離
Step6. 分享地圖
Step7. 回到地圖畫面點選嵌入我的網站
Step8. 複製HTML語法
Step9. 嵌入到編輯器中
Step10. 完成
Step1. 進入Google地圖
開啟【我的地圖】並點擊開始使用。
Step2. 進入My Maps建立新地圖
Step3. 新增圖層、路線
除此之外，我們還可以在下方的「基本地圖」中切換地圖風格，選擇自己想要呈現的地圖樣式喔！
Step4. 新增A、B兩端地點
除了A、B兩端，還可以再設定第三個以上的目的地。
另外我們也可以在此上方選擇交通工具，選項為開車、單車或步行。
Step5. 新增標記、丈量距離
直接在上方表格輸入目標地點，即可插入螢光綠色的標記，讓座標更清楚。
如果想要知道A、B兩端的距離，可以利用上方的「測量距離和區域」的功能來了解喔！
▲ 插入標記
▲ 測量兩地距離
Step6. 分享地圖
若在一開始沒有填寫地圖的名稱與說明，在點選分享時，就會要求我們先將此填寫完畢喔！
在分享地圖時，預設模式都不會將連結打開，也就是預設都是私人的模式，我們要開啟「知道這個連結的人都可以查看」與「讓其他使用者能在網路上搜尋及找到這份地圖」這兩個選項。另外，我們也可以決定是否要「讓其他使用者可以在地圖上看到你的名稱和相片」。
設定完畢後，按下關閉即可。
Step7. 回到地圖畫面點選嵌入我的網站
Step8. 複製HTML語法
點選嵌入我的網站後，即可看到「嵌入這個地圖」的對話框，裡面有一串HTML語法代碼，將此複製後貼到編輯器當中。
Step9. 嵌入到編輯器中
嵌入方式跟上面一樣，我們將語法貼到編輯器當中並儲存，即可在前台看到畫面囉！
Step10. 完成
完成之後，我們就可以在前台發現我們剛剛嵌入的路線地圖，使用者可以點擊A端或B端，地圖就會顯示該地點的資訊，還可以透過右上方的放大選項進入我們的地圖當中，看到更加詳細的地圖資訊。
以上就是如何將Google Map嵌入到網站的效果囉！
