Google教學分享

怎麼將Google Maps地圖嵌入到部落格/網站?可設為街景模式&英文介面。



Google-Maps地圖嵌入教學
在經營部落格時,通常會加入商家的Google Maps地圖,讓讀者更方便找到店家的位置,但要怎麼樣才能將Google Maps嵌入到網站中?以下為使用官方iframe語法,輕鬆把Google地圖嵌入到部落格教學。可自訂放置的地圖尺寸大小、選擇要顯示街景、地圖或3D衛星模式,還能設定嵌入英文或其他語言的地圖。








Google Maps嵌入到網站 教學
STEP1

前往Google Maps地圖頁面。
Google-Maps地圖嵌入教學1

STEP2

輸入關鍵字或座標,把要嵌入的地圖範圍找出來,然後點一下「分享」按鈕。
Google-Maps地圖嵌入教學2

STEP3

選擇「嵌入地圖」,會獲得一組iframe程式碼,將它完整複製起來貼到部落格。
Google-Maps地圖嵌入教學3

STEP4

如果地圖想要以街景、3D衛星或不同的方式呈現的話,只需要在產生語法前,先將看到的畫面切換為其他模式,然後再依照上方的步驟,選擇「分享」→「嵌入地圖」。
Google-Maps地圖嵌入教學4

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我的地圖製作教學