如何向网页中嵌入谷歌英文地图

最新推荐文章于 2023-04-06 18:13:37 发布

吴小花的博客

最新推荐文章于 2023-04-06 18:13:37 发布

阅读量1.5k

点赞数

分类专栏： Web前端开发

原文链接：https://blog.csdn.net/duzixi/article/details/74356791

版权

Web前端开发专栏收录该内容

42 篇文章 6 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

此方案亲测可用，已经成功将中文谷歌地图换成英文

前言

百度地图目前不支持英文，所以如果想向网页中嵌入英文地图的话只能使用谷歌地图。

（当然，想在国内从浏览器访问谷歌地图的大前提是已经翻了墙。）

谷歌地图网址：https://www.google.com/maps/@27.9666829,120.6656123,15z

点击左侧的“共享”->“嵌入地图”，便可获得嵌入地图的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" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

但这个API并没有设置显示语言的地方。虽然官网说谷歌地图会因地区而自动显示不同的语言，但事实上显示哪种语言与浏览器设置的默认语言有关。

那么如果想强制指定为英文怎么办呢？

解决方案：调用另一个嵌入地图API

https://developers.google.com/maps/documentation/embed/guide#api

这个API也是谷歌官方提供的，使用起来唯一有点不方便的地方就是要申请一个API。（点这里->）https://console.developers.google.com/flows/enableapi?apiid=maps_embed_backend&reusekey=true

<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>

应用到项目中：

 <iframe src=" https://www.google.com/maps/embed/v1/place?key=AIzaSyBFyywkFidoipAvKDZQfsdqceqJjDI9m2c
        &q=Dajinjia Villagers' Committee, Jimo, Qingdao, Shandong, China&language=en-US" width="100%" height="600"
        frameborder="0" style="border:0;" allowfullscreen=""></iframe>

效果：

吴小花的博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
如何向网页中嵌入谷歌英文地图

此方案亲测可用，已经成功将中文谷歌地图换成英文前言百度地图目前不支持英文，所以如果想向网页中嵌入英文地图的话只能使用谷歌地图。（当然，想在国内从浏览器访问谷歌地图的大前提是已经翻了墙。）谷歌地图网址：https://www.google.com/maps/@27.9666829,120.6656123,15z点击左侧的“共享”->“嵌入地图”，便可获得嵌入地图的ifram...
复制链接

扫一扫