Bootstrap

谷歌地图API 显示地图添加maker点,信息窗体及事件

引入秘钥

为GoogleMaps设置宽高样式

var maps = new google.maps.Map(document.getElementById("GoogleMaps"),{ 
        center:new google.maps.LatLng(39.915,116.404),   
        disableDefaultUI:false,//设置为true,禁用地图上所有控件
        mapTypeControl:false, //地图类型控制的初始启用/禁用状态。
      fullscreenControl:false,
       mapTypeId: google.maps.MapTypeId.ROADMAP //默认加载道路地图视图  动态设置地图类型setMapTypeId(google.maps.MapTypeId.HYBRID); 
  });
maps.setZoom(16);//设置地图显示级别

添加maker点;

var marker = new google.maps.Marker({
      position:  new google.maps.LatLng(val.OLat,val.OLng),//读取的经纬度
        icon:imgstatusURl,//自定义Marker点
        map: maps
    });

maps.panTo(new google.maps.LatLng(val.OLat,val.OLng));//平移到指定位置

//创建窗体信息

var html=[];
html.push("<div style='width:250px;height:156px;'>");
html.push("<b>"+DeviceName+"</b>");
html.push("<div><span style='font-weight:bold'>设备信号:</span>");
html.push("<div style='font-weight:bold'>&nbsp地址:"+val.Address+"</div>")
html.push("</div>") 
html.push("</div>");


var infowindow= new google.maps.InfoWindow({
content: html.join(''),
disableAutoPan:true //设置为true时可禁用自动平移功能,可通过PanTo方法来平移到指定位置,如果设置为false,可不使用panTo()方法

});

infowindow.open(maps, marker);//打开信息窗体

//marker点事件,点击关闭信息窗体

marker.addListener('click', function() {
infowindow.close();
})

//监听X关闭按钮事件

google.maps.event.addListener(infowindow,"closeclick", function()
    {
    infowindow.close();
    });
   

;