[小技巧]如何在你的網頁或部落格中直接嵌入Google街景圖?

0
2,185 人次

image

Google地圖是不少使用者愛用的地圖查詢工具,不論是查詢地址、景點、設施,或是規劃路徑、查看街景……等功能一應俱全。如果想在網頁或部落格中嵌入一塊「Google地圖」其實很簡單,但是要如何嵌入一塊「Google街景圖」相信很多讀者就不知道怎麼做了,今天阿正老師要介紹一個非常簡單的方法,只要簡單兩個步驟就能在網頁中嵌入Google街景,趕快來試試看吧!

 

當我們想讓網站的訪客清楚知道某個地點,可以在網頁中嵌入一塊「Google地圖」,但是如果想讓訪客更清楚看到該景點的樣貌,這時候就可以嵌入一塊「Google街景圖」會更有效果。今天阿正老師在「Digital Inspiration」網站看到了一篇文章介紹如何嵌入「Google街景圖」,在這邊分享給大家,只要簡單兩個步驟即可輕鬆完成,大家不妨跟著以下步驟一塊兒來試試吧!

 

Google地圖

 

如何嵌入Google地圖

 

若想要分享Google地圖給親友,或是要嵌入到網頁時,只要事先找好地址或地標,然後按下Google地圖右下角的齒輪按鈕,點選【分享和嵌入地圖】。

SNAGHTML16bda3

此時可在上方切換「分享連結」或「嵌入地圖」,將裡面的網址或HTML碼複製起來即可。

SNAGHTML1da1bb

 

如何嵌入Google街景視圖

 

1.先打開「http://ctrlq.org/maps/embed/」這個專門用來嵌入Google地圖的網站,找到想嵌入街景圖的位置,然後將畫面左方的「小黃人」拖曳到馬路上。

SNAGHTMLefa84

2.接著你可以調整要觀看的街景視圖角度,可自由旋轉,確定方位之後,將左下角的HTML碼複製起來就搞定啦!

SNAGHTMLedd44

3.接著你可以開啟HTML編輯器或是部落格的文章編輯後台,切換到HTML模式,再將剛才複製起來的這段HTML碼貼上,裡面可自行修改「width」及「height」屬性來調整iframe的大小。

image

4.最後就能看到網頁中已經成功嵌入Google街景圖了,是不是很方便呢?

SNAGHTML10e39a

以後當你想在網頁中介紹某個景點時,就可以直接把Google地圖跟街景圖同時嵌入進來,如此一來就能立刻讓使用者知道位置及該地的風貌囉,真是太方便啦!

###

發表迴響