網頁上嵌入 Google 地圖是常見的充實網頁版面技巧,但是經常遇到兩個小需求,如果有看過 Google MAP 的 API 文件肯定知道怎麼解,但是非工程人員用的關鍵字卻不太容易直接 Google 到解法,所以寫一篇小文章

一、網頁上要顯示英文的 Google Map

此需求常見於一些多語系網站或英文網站,沒有半個中文字的網頁上嵌入了一個 Google Map,但是路名、place card 都是中文字,被要求更正。

其實 Google 地圖會自動以當地語言顯示地名(見下方延伸閱讀說明),所以在台灣看地圖,上面會是中文字,洋人在海外看就會是外文的囉!但是這種講法是無法結案的,所以我們用 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 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 使用限制 使用前請詳閱公開說明書