在寫部落格,需要用到地圖的時候,通常不是自己畫一張簡要的地圖,要不就是利用Urmap或其他地圖軟體查詢,將畫面擷取下來,再將圖檔上傳自己的部落格上,或者利用API(Application Programming Interface)[1] 將地圖嵌入自己的在部落格或網頁中。現在,Google Map推出了一項新功能,只要利用複製、貼上兩個步驟,便可以輕鬆將Google Map的動態地圖,放在個人部落格或網頁上喔!

Step1:進入Google Map頁面,在搜尋欄鍵入你要找的地址。

wtyijhhm
Google Map搜尋欄輸入地址

 

Step2:地圖上顯示出妳要的地方後,將【連接至此網頁】/【貼上 HTML 以嵌入您的網站】的欄位中的HTML碼,全部選擇並複製。

unjqzjxu
複製【連接至此網頁】/【貼上 HTML 以嵌入您的網站】欄位中的HTML碼

 

Step3:在部落格編輯器上,改成【原始碼】顯示,將剛剛複製的HTML碼,貼在想顯示的地方。

cjdumwci
部落格的編輯管理,改成原始碼作業方式

ljchdqbz
將剛剛複製的網址,貼在想顯示的地方

fvjmdivj
Google Map HTML碼貼上啦!

 

Step4:存檔後就大功告成啦!若要移動地圖,或是改成衛星地圖,都可以直接在部落格上操作喔,示範網頁:http://blog.yam.com/hanako/article/11472939

scnhbcpa
存檔後網頁顯示出的Google Map動態地圖

jmunxudt
可以在地圖上做拖拉,更改地圖顯示方式喔!

 

此外,這個地圖原始設定的大小是425X350,若想更改地圖在部落格上顯示的大小,可以點選在【連接至此網頁】/【貼上 HTML 以嵌入您的網站】下方的【自訂和預覽內嵌地圖】連結,會跳出一個頁面,便可選擇小、適中、大型的地圖,或是自己輸入地圖大小,下方也會隨即有大小的預覽,確定你的地圖大小後,在最下面的框框內,將HTML的碼複製,貼回自己的部落格。

jzwoirra
【連接至此網頁】/【貼上 HTML 以嵌入您的網站】下方的【自訂和預覽內嵌地圖】連結

ufctccuf
【自訂和預覽內嵌地圖】頁面

 

以上,是用Yam天空部落格所做的測試,很可惜的,Yahoo 奇摩部落格並不能貼上這樣的HTML語法,既使貼上了,也只會出現「檢視較大的地圖」連結,而不會有地圖出現。

 

註1:API,應用程序介面。透過一些小程式的開發,協助使用者進行網站或是軟體相關操作,http://zh.wikipedia.org/w/index.php?title=API&variant=zh-tw

創作者介紹

plhcc的部落格

plhcc 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • iot2016 Charlie
  • 看到你的網頁崁入地圖, 請問是否願意接 "嵌入房仲網地圖" 大概多少錢? 0911002047 charlie
  • iot2016 Charlie
  • 請用簡訊或LINE0911002047, 回答比較方便
找更多相關文章與討論