在經營部落格時,通常會加入商家的Google Maps地圖,讓讀者更方便找到店家的位置,但要怎麼樣才能將Google Maps嵌入到網站中?以下為使用官方iframe語法,輕鬆把Google地圖嵌入到部落格教學。可自訂放置的地圖尺寸大小、選擇要顯示街景、地圖或3D衛星模式,還能設定嵌入英文或其他語言的地圖。
Google Maps嵌入到網站 教學
STEP1
前往Google Maps地圖頁面。
STEP2
輸入關鍵字或座標,把要嵌入的地圖範圍找出來,然後點一下「分享」按鈕。
STEP3
選擇「嵌入地圖」,會獲得一組iframe程式碼,將它完整複製起來貼到部落格。
STEP4
如果地圖想要以街景、3D衛星或不同的方式呈現的話,只需要在產生語法前,先將看到的畫面切換為其他模式,然後再依照上方的步驟,選擇「分享」→「嵌入地圖」。
Google Maps嵌入範例-地圖模式
Google Maps嵌入範例-街景模式
Google Maps嵌入範例-3D衛星模式
Google Maps嵌入英文的語言到網站 教學
STEP1
如果是要嵌入英文或其他語言的Google Maps的地圖,則要使用不同的嵌入方式,首先必須進入獲得Google API金鑰,啟用Maps Embed API。
STEP2
獲得的API大約長這樣:AIzaSyAvXXXXXXXXXXXXXXXXXXXXXXXXXX,複製起來貼到以下程式碼的對應位置,包含地點與language語言,都請自行替換。(進階:Google Maps Embed API教學)
<iframe allowfullscreen="" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=輸入地點&key=金鑰放這裡&language=en" style="width:100%;height:500px"></iframe>
嵌入英文介面Google地圖範例
延伸閱讀:Google Map我的地圖製作教學