如何在網頁裡面嵌入地圖連結？

專業、盡責或至少熱心的部落客，除了把自身感覺搭配文字和照片活靈活現地描述出來之外，還要把必要的訊息帶到（比方說地圖、路線、捷徑），不然別人怎麼按圖索驥、尋幽探訪呢？

簡單說，好東西若想與好朋友分享，就得從提供「地圖」開始做起！

事實上，這樣的作法很早就已經風行於部落格圈了。而且可以選擇的圖資與系統有好多套，舉凡Google地圖、Yahoo!奇摩地圖等。

而我之所以有這樣的體悟，以及在部落格文章內全面性提供地圖的打算，便是因為在別人無名部落格的食記裡面看到了Yahoo!奇摩地圖的應用。

【Google地圖使用教學】


↑Google地圖的「自訂和預覽內嵌地圖」功能。

1. 用瀏覽器打開Google地圖的首頁。
2. 在輸入列直接輸入地址，例如「元氣早餐」的地址是「彰化縣和美鎮和平街13號」，然後按「搜尋地圖」，即可找到地圖。這份內嵌在網頁裡面的地圖，是可以放大、縮小，以及上、下、左、右拖曳檢視範圍的。
3. 至於要分享這份地圖的話，在地圖上方的工具列最右邊有個「連結」選項，提供了「超連結」和「內嵌」兩種版本選擇。如果網頁的文章閱讀格式是偏向窄版的（似乎不少部落格都是如此，例如本站寬度只有約390px），那麼提供「超連結」讓讀者在新視窗裡面瀏覽，會比範圍相對侷限的「內嵌」版本要來得效果更佳。
4. 此外這個按下「連結」後跑出來的小方框下面還有個「自訂和預覽內嵌地圖」選項，可以自訂「內嵌」版地圖的大小，並產生對應的HTML程式碼。
   

【Yahoo!奇摩地圖使用教學】


↑Yahoo!奇摩地圖的「自訂嵌入地圖樣式」功能。

1. 用瀏覽器打開Yahoo!奇摩地圖的首頁。
2. 在輸入列直接輸入地址，例如「元氣早餐」的地址是「彰化縣和美鎮和平街13號」，然後按「go」，即可找到地圖。這份內嵌在網頁裡面的地圖，是可以放大、縮小，以及上、下、左、右拖曳檢視範圍的。
3. 至於要分享這份地圖的話，在地圖上方的工具列最右邊有個「嵌入」選項，按下之後會捲到網頁底部的「地圖小工具」，提供了「內嵌」版本地圖的選擇。如果網頁的文章閱讀格式是偏向窄版的（似乎不少部落格都是如此，例如本站），那麼提供「超連結」讓讀者在新視窗裡面瀏覽，會比範圍相對侷限的「內嵌」版本要來得效果更佳。「超連結」版本地圖可經由直接複製網址列的網址來取得。
4. 此外「地圖小工具」下方還有個「自訂嵌入地圖樣式」選項，可以自訂「內嵌」地圖的大小、地點圖示等，並產生對應的HTML程式碼。
   

範例：元氣早餐【Google地圖】【Yahoo!奇摩地圖】