網頁嵌入Google 地圖的小小需求,例如顯示英文地圖
一、網頁上要顯示英文的 Google Map
此需求常見於一些多語系網站或英文網站,沒有半個中文字的網頁上嵌入了一個 Google Map,但是路名、place card 都是中文字,被要求更正。
其實 Google 地圖會自動以當地語言顯示地名(見下方延伸閱讀說明),所以在台灣看地圖,上面會是中文字,洋人在海外看就會是外文的囉!如果不信的話,例如 Google Chrome 可以到瀏覽器設定裡面,把英文改到語言順序的第一個,這樣開起來就會變成英文的 Google Map 了,但是這種務實的專業講法是無法結案的,所以我們用 Google Map JavaScript API 讓網頁上的地圖強制更換成特定的語系。
具體效果大概像下面這樣,把總統府周邊的地圖變成英文
做法
1.到 Google APIs Console 開一組金鑰,開頭大概長得像 Alza….共有 39 個字
2.把 iframe 語法改成下面這種,地址跟金鑰換成自己的。<iframe allowfullscreen="" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=台灣台北市中正區重慶南路一段122號&key=金鑰放這裡&language=en" style="width:100%;height:500px"></iframe>
3.打完收工。
二、地圖上不要有其他店家
網頁上嵌入了一個地圖,從地圖上可以看到附近的車站、交通點、重要地標,可是連競爭對手也在地圖上! 這樣客人當然不高興啦。
但實際上每個人在地圖上看到的點,並不是一樣的,會略有差異,尤其是那台裝置已經登入 Google 帳號,那地圖上某處常去的地方,或是有加收藏的地方,聰明的 Google map 都會覺得你想要看,自動特別顯示出來。
如果想不出美好的說法安撫客人,那只好務實的來解決問題啦,我們可以用 Google Map JavaScript API 的 Map style 功能,把地圖上的店家跟地標清光光,具體效果大概像下面這樣,把地圖清到只剩路名和捷運站。
做法
1.開一組 Google API Key,上面已經開過的就不用再開了
2.參閱 Google Mpas API 的 開始設定地圖樣式 的說明,用 API 專屬的方式讓網頁顯示地圖。
3.地圖的相關參數可以用 Styling Wizard: Google Maps APIs 協助產生,像此例是將 Points of interest 中的一些政府機關、店家,選為 hidden。
4.將產生出來的地圖組態加在網頁上,打完收工。
延伸閱讀
– Google 地圖說明 變更 Google 地圖的語言或網域
– 將地圖當地語系化 | Google Maps JavaScript API
– javascript – Google maps; add place card to marker – Stack Overflow
– Google Maps JavaScript API 使用限制 使用前請詳閱公開說明書