如何向網頁中嵌入谷歌英文地圖
阿新 • • 發佈：2018-12-17
前言
百度地圖目前不支援英文，所以如果想向網頁中嵌入英文地圖的話只能使用谷歌地圖。
（當然，想在國內從瀏覽器訪問谷歌地圖的大前提是已經翻了牆。）
點選左側的“共享”->“嵌入地圖”，便可獲得嵌入地圖的iframe程式碼。
谷歌嵌入地圖生成
完整程式碼如下：
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d391565.2558546159!2d116.11727013234623!3d39.9390731255796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35f05296e7142cb9%3A0xb9625620af0fa98a!2z5Lit5Zu95YyX5Lqs5biC!5e0!3m2!1szh-CN!2sjp!4v1499172397317" allowfullscreen="" width="600" height="450"></iframe>但這個API並沒有設定顯示語言的地方。雖然官網說谷歌地圖會因地區而自動顯示不同的語言，但事實上顯示哪種語言與瀏覽器設定的預設語言有關。
那麼如果想強制指定為英文怎麼辦呢？下面給出兩種解決方案。
解決方案一：呼叫另一個嵌入地圖API
這個API也是谷歌官方提供的，使用起來唯一有點不方便的地方就是要申請一個API。（點這裡->）Google API Console。
<html> <head> </head> <body> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=從谷歌那裡申請到的API &q=北京市&language=en-US"> </iframe> </body> </html>
如上，在src的url引數裡追加 language=en-US 就可以了。還有，key的值要替換成從谷歌那裡申請好的API。
解決方案二：呼叫Maps JavaScript API
下面的程式碼是在谷歌官方例子的基礎上做了一點修改，也是隻需要追加language=en-US 就可以了。
另外，同樣需要申請API.
<!DOCTYPE html> <html> <head> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h3>My Google Maps Demo</h3> <div id="map"></div> <script> function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=從谷歌那裡申請到的API&callback=initMap&language=en-US"> </script> </body> </html>
第二個方法的缺點是沒有生成左上角的標識，如果需要還需要繼續新增程式碼。