-
首页
-
网站建设
-
优化推广
-
案例
方案
方案
Solutions
电商平台
电商网站开发
E-commerce & System
微信营销
资讯
我们
我们
About Us
联系
联系
Contact Us
-
- 联系方式
- 业务热线： 15082661954
- 邮箱： foxl@hulingweb.cn
- 人才招聘
- HR邮箱：
- 190014322@qq.com
精准传达 • 价值共享
洞悉互联网前沿资讯，探寻网站营销规律
网页里嵌入谷歌地图教程
作者：狐灵科技 | 2019-12-28 17:00 |点击：
前言
百度地图目前不支持英文，所以如果想向网页中嵌入英文地图的话只能使用谷歌地图。
（当然，想在国内从浏览器访问谷歌地图的大前提是已经翻了墙。）
点击左侧的“共享”->“嵌入地图”，便可获得嵌入地图的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。（点这里->）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
https://developers.google.com/maps/documentation/JavaScript/adding-a-google-map
下面的代码是在谷歌官方例子的基础上做了一点修改，也是只需要追加language=en-US 就可以了。
另外，同样需要申请API.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<p id="map"></p>
<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>
第二个方法的缺点是没有生成左上角的标识，如果需要还需要继续添加代码。
—— 微信公众号 ——
上一篇———————
解决百度编辑器自动添加<p>标签的方法下一篇———————
国外在线客服软件工具推荐：类似和百度商桥一样的沟通工具
关于狐灵科技
+狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！
我们的优势
多项网站设计传播大奖
营销型网站建设专家
自主研发网站管理系统
B2C电商网站建设供应商
完善的售后服务体系
我们的不同
+在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！
公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954
Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1
专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图
