搜尋此網誌

工商服務

2008年10月29日 星期三

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

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

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

事實上,這樣的作法很早就已經風行於部落格圈了。而且可以選擇的圖資與系統有好多套,舉凡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!奇摩地圖

沒有留言:

張貼留言