WFU

2015年7月18日 星期六

免費在文章中嵌入「Google Map」


在看一些美食或旅遊文章時
常常會看到文章中會有附上地圖
這是怎麼用出來的呢?!

讓我來示範一下吧...
首先,請先開一個瀏覽器視窗,然後連到Google Map(連結位置點這邊
然後在右上角的欄位,輸入您要的位置(此處示範位置為「總統府」)

然後畫面會自動跳到輸入位置的地方

接著,用滑鼠左鍵,點選下圖圈起來的選項符號,會出現一堆功能表

我們要的功能是「分享或嵌入地圖」

點選之後,會出現下面的畫面,其中
分享連結」是可以直接將網址丟給其他人,這樣別人就可以直接連到這個位置
      (可以將網址縮短,這樣網址才不會落落長)
嵌入地圖」則是我們要的功能

點選「嵌入地圖」之後
會出現下面畫面

在上圖中,我們可以看到
地圖可以設定大、中、小或是自訂大小(大家可以自己測試不同功能)

而右方的HTML碼則是我們要的東西
整個選取起來之後,按滑鼠右鍵,選擇「複製」,把這串程式碼複製下來

接著,回到我們自己的部落格,開一篇新文章
然後將畫面調整到「HTML」格式(按下圖紅框處)
然後將剛剛複製的程式碼貼上去

在上圖,我有特定將「長寬」的地方標示出來
大家可以在這個地方,依照自己的需求來做大小的修正

接著將文章調整到「撰寫」模式
就可以發現,文章中已經出現一個地圖了!!!

如果嫌平面地圖不夠清楚
我們還可以嵌入「街景圖
先回到剛才找位置的畫面,然後點選「街景服務」

點選之後,會看到最新的實際街景
(但不是即時街景,因為Google街景車巡迴要一段時間)
一樣點選左上方的功能選單


將這個地方的HTML程式碼複製下來

貼到文章中的HTML模式中
橫線標示的地方,可以調整自己文章中所需要的地圖大小

再回到「撰寫」模式
噹噹~~~ 街景圖出現啦!!!

夠簡單吧...
大家自己試試看吧^__^