Tag: 互動地圖

如何在部落格中加入 Google Map 互動地圖!

話說今天手忙腳亂之際,朋友 D 竟然打電話來問如何在部落格中加入 Google Map 互動地圖,把石先生充當一個技術支援站。當然,朋友 D 也很好,表明願意請石先生吃一餐很好的下午茶,所以石先生再忙也會回答啦!哈哈!奈何這等事情並不是三言兩語可以說得明白,所以石先生只好用心的寫一篇文章,圖文並茂的解釋一番,也在此跟大家分享一下,好讓大家也知道此事。 事實上,要在部落格中加入 Google Map 互動地圖並不困難,只是閣下的部落格需要支援 HTML 方可以做到。接下來我們就看看圖文並茂的教學吧! 首先,大家先打開 Google Map 並輸入有關的地址,找出確實的位置。 此時,我們可以看到左方有一個連結的按鈕。按下去後便可以彈出一個視窗。在這裡我們可以看到兩個連結,一是連結,二是嵌入的方法,而我們需要用到的是第二種。 由於大家使用的地圖大小均有不同,所以我們便要按下右下方的自訂和預覽內嵌地圖。進去後,我們可以看到有自訂的選項,然後輸入有關的數值。如石先生便習慣使用 width = 600 的做法,接著把下列的 HTML Code 複製。 複製後的 Code,打開自己的部落格系統,走進 HTML 位置,然後貼上。 貼上後可以看到在即時預覽上看到一個互動的圖示,此時便代表成功了! 發佈後,我們便可以看到互動的地圖囉! 由於 Google Map 同時支援實時的地圖影象資料,所以我們也可以選擇另一個方法顯示。選擇這個方法,我們可以先打開地圖實景,然後選擇右下角的小圖示,按它的左上角箭頭,把它變成上下各半的畫面。(如下圖) 來到這個畫面後,我們可以重複剛剛的步驟,選擇連結按鈕,然後複製及貼上有關的 HTML 碼,進行有關的設置。 看過以上的教學後,大家也該明白了吧!你也試試看吧!玩玩這互動地圖吧!(以下便是成品囉!) [googlemaps https://maps.google.com.hk/maps?f=q&source=embed&hl=zh-TW&geocode=&q=136+Long+Acre,+Covent+Garden,+London,+WC2E+9AD&aq=&sll=51.51218,-0.126217&sspn=0.001451,0.004128&brcurrent=3,0x0:0x0,0&ie=UTF8&hq=&hnear=Covent+Garden,+Long+Acre,+London+WC2E+9NQ%E8%8B%B1%E5%9C%8B&t=m&layer=c&cbll=51.514243,-0.122565&panoid=w7HZjK37q32o9Lq4I3UJCA&cbp=11,334.5,,0,-4.85&ll=51.493956,-0.122566&spn=0.018703,0.051498&z=14&output=svembed&w=600&h=350] 檢視較大的地圖