使用JS加载GoogleMap

本文介绍了如何利用JavaScript异步加载Google Maps API,并详细展示了加载后的回调函数以及地图初始化的步骤,包括设置地图中心、缩放级别以及启用街景和地图类型控制等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

查看GoolgeMapAPI时,可以看到,通过异步加载是最好的方式,下面是实现的代码:

1.定义GoogleMap加载后的回调函数

var dom = document.getElementById("mapDiv"); //自己设置

window.googleMapInitialize = function(){
    var lat = ""; //自己设置
    var lng = “”//自己设置;
    var mapOptions = {
        center:new google.maps.LatLng(lat,lng),
        zoom: 15,
        streetViewControl: true,
        mapTypeControl: true
    };
    window.GoogleMapCanvas = new google.maps.Map(dom,mapOptions);
};

2.加载Javascript标签

var src = "";

if(currentContry=="US"){
    //中国加载路径 maps.googleapis.cn
    src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
      '&libraries=places,geometry&callback=googleMapInitialize';
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
document.body.appendChild(script);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值