網頁嵌入Google 地圖的小小需求，例如顯示英文地圖

網頁上嵌入 Google 地圖是常見的充實網頁版面技巧，但是經常遇到兩個小需求，如果有看過 Google MAP 的 API 文件肯定知道怎麼解，但是非工程人員用的關鍵字卻不太容易直接 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 使用限制 使用前請詳閱公開說明書