話說今天手忙腳亂之際,朋友 D 竟然打電話來問如何在部落格中加入 Google Map 互動地圖,把石先生充當一個技術支援站。當然,朋友 D 也很好,表明願意請石先生吃一餐很好的下午茶,所以石先生再忙也會回答啦!哈哈!奈何這等事情並不是三言兩語可以說得明白,所以石先生只好用心的寫一篇文章,圖文並茂的解釋一番,也在此跟大家分享一下,好讓大家也知道此事。

事實上,要在部落格中加入 Google Map 互動地圖並不困難,只是閣下的部落格需要支援 HTML 方可以做到。接下來我們就看看圖文並茂的教學吧!

首先,大家先打開 Google Map 並輸入有關的地址,找出確實的位置。


此時,我們可以看到左方有一個連結的按鈕。按下去後便可以彈出一個視窗。在這裡我們可以看到兩個連結,一是連結,二是嵌入的方法,而我們需要用到的是第二種。

由於大家使用的地圖大小均有不同,所以我們便要按下右下方的自訂和預覽內嵌地圖。進去後,我們可以看到有自訂的選項,然後輸入有關的數值。如石先生便習慣使用 width = 600 的做法,接著把下列的 HTML Code 複製。

複製後的 Code,打開自己的部落格系統,走進 HTML 位置,然後貼上。


貼上後可以看到在即時預覽上看到一個互動的圖示,此時便代表成功了!

發佈後,我們便可以看到互動的地圖囉!

由於 Google Map 同時支援實時的地圖影象資料,所以我們也可以選擇另一個方法顯示。選擇這個方法,我們可以先打開地圖實景,然後選擇右下角的小圖示,按它的左上角箭頭,把它變成上下各半的畫面。(如下圖)


來到這個畫面後,我們可以重複剛剛的步驟,選擇連結按鈕,然後複製及貼上有關的 HTML 碼,進行有關的設置。


看過以上的教學後,大家也該明白了吧!你也試試看吧!玩玩這互動地圖吧!(以下便是成品囉!)

檢視較大的地圖





【此文章刊載於石先生部落;標題:如何在部落格中加入 Google Map 互動地圖!;本篇文章為贊助內容;強制廣告:HisTrend.HK 給你不一樣的科技產品】