google地图api

国外访问地址
https://maps.googleapis.com/maps/api/js?key=YOUR_KEYcallback=initMap
国内访问地址
https://ditu.google.cn/maps/api/js?key=YOUR_KEY

地图初始化

调用地图显示接口： Map(mapDiv:Node, opts?:MapOptions )

var mapOption = {
        center:new google.maps.LatLng(39.915,116.395),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
   var map=new google.maps.Map(document.getElementById("map"), mapOption);

Node表示要显示的DOM节点
MapOtions中 常用属性

zoom：缩放等级（1：世界 5：陆地/大陆 10：城市 15：街道 20：建筑物）
center地图中心点经纬度，
streeViewControl：boolean是否显示街景控制按钮（地图上的小人），
zoomControl ：boolean缩放控制按钮
gestureHandling:'greedy’所有触摸手势和滚动事件平移或缩放地图，默认ctrl+鼠标滚动
scaleControl:boolean 是否显示标尺
mapTypeId：‘ROADMAP’ 地图类型。
disableDefaultUI：boolean 双击启用/禁用缩放和居中。默认情况下启用。

添加标注

使用API接口：maps.Marker([MarkerOptions optional])

var marker = new google.maps.Marker({
	position: {lat:39.915,lng:116.395} ,//  LatLng
	map:map ,  // new google.maps.Map() 由Map()构造出来对象
	label:"终",  //向标记中添加标签
	icon:"map.png" //默认是红色定位图标
})

常用属性

position：LatLng 标记位置 map： Map 要显示标记的地图。 icon: string|Icon
前景的图标。如果提供了一个字符串，则将其视为Icon字符串为url。 label：string|MarkerLabel optional
向标记添加标签。标签可以是字符串，也可以是MarkerLabel对象。

标记信息窗口

使用API接口 maps.InfoWindow(InfoWindowOptions optional)

 var map=new google.maps.Map(document.getElementById("map"), mapOption);
 var marker = new google.maps.Marker(markeroption);
var infowindow = new google.maps.InfoWindow();
marker.addListener('click',function(e){
infowindow.setContent(content);
infowindow.open(map,marker);
})

常用属性

content ： string|Node optional
要在InfoWindow中显示的内容。这可以是HTML元素，纯文本字符串或包含HTML的字符串。InfoWindow将根据内容进行调整。要为内容设置显式大小，请将content设置为具有该大小的HTML元素。
disableAutoPan： boolean optional
打开时禁用自动平移。默认情况下，信息窗口将平移地图，以便在打开时完全可见。 maxWidth ： number optional
无论内容的宽度如何，infowindow的最大宽度。仅在调用open之前设置此值才会考虑该值。要在更改内容时更改最大宽度，请调用close，setOptions，然后打开。
pixelOffset： Size optional
信息窗口的尖端距离地图上信息窗口锚定的地理坐标点的偏移量（以像素为单位）。如果使用锚打开InfoWindow，pixelOffset则将从锚的anchorPoint属性计算。
position： LatLng|LatLngLiteral optional
LatLng，用于显示此InfoWindow。如果使用锚点打开InfoWindow，则将使用锚点的位置。 zIndex ： number
optional
所有InfoWindows都按照zIndex的顺序显示在地图上，较高的值显示在InfoWindows前面，值较低。默认情况下，InfoWindows根据其纬度显示，低纬度的InfoWindows出现在高纬度的InfoWindows前面。InfoWindows始终显示在标记前面。

查找路径

var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer({drggable:true});
//路径可拖动切换
directionsRenderer.setMap(map); //设置null清空路径
directionsService.route({
origin:{query:"故宫'}, //起点
destination:{query:"清华大学"}，//终点
provideRouteAlternativs:true, //多方案
travelMode:"DRIVING"

},function(result,status){
if(status === "OK"){
 directionsRenderer.setDirections(result);
}else{
console.error("error:"+status)
}
  
   
})

显示路径详情面板

directionsRenderer.setPanel(document.getElementById('panelID'))

拖动路径事件

google.maps.event.addListener(directionsRenderer,'directions_changed',function(){
//doing somethings
})

搜索地点

var geoCoder = new google.maps.GeoCoder();
geoCoder.geocode({"address":"民族大学"}，function(result,status){
if(status === "OK"){
	console.info(result)
}
})

搜素关键字： 可用空格关联多个关键词

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "27",
               "short_name" : "27",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "中关村南大街",
               "short_name" : "中关村南大街",
               "types" : [ "route" ]
            },
            {
               "long_name" : "海淀区",
               "short_name" : "海淀区",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "北京市",
               "short_name" : "北京市",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "中国",
               "short_name" : "CN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "中国北京市海淀区中关村南大街27号",
         "geometry" : {
            "location" : {
               "lat" : 39.950878,
               "lng" : 116.320185
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 39.95222698029149,
                  "lng" : 116.3215339802915
               },
               "southwest" : {
                  "lat" : 39.94952901970849,
                  "lng" : 116.3188360197085
               }
            }
         },
         "place_id" : "ChIJka9M235R8DURSSTTEn9R71U",
         "plus_code" : {
            "compound_code" : "X82C+93 中国北京市海淀区",
            "global_code" : "8PFRX82C+93"
         },
         "types" : [ "establishment", "point_of_interest", "university" ]
      },
      {
         "address_components" : [
            {
               "long_name" : "文华路",
               "short_name" : "文华路",
               "types" : [ "route" ]
            },
            {
               "long_name" : "海淀区",
               "short_name" : "海淀区",
               "types" : [ "political", "sublocality", "sublocality_level_1" ]
            },
            {
               "long_name" : "北京市",
               "short_name" : "北京市",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "中国",
               "short_name" : "CN",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "中国北京市海淀区文华路",
         "geometry" : {
            "location" : {
               "lat" : 39.950929,
               "lng" : 116.32125
            },
            "location_type" : "GEOMETRIC_CENTER",
            "viewport" : {
               "northeast" : {
                  "lat" : 39.95227798029151,
                  "lng" : 116.3225989802915
               },
               "southwest" : {
                  "lat" : 39.94958001970851,
                  "lng" : 116.3199010197085
               }
            }
         },
         "place_id" : "ChIJEQn27X5R8DUR5O6E4IEqPL0",
         "plus_code" : {
            "compound_code" : "X82C+9F 中国北京市海淀区",
            "global_code" : "8PFRX82C+9F"
         },
         "types" : [ "establishment", "point_of_interest", "university" ]
      }
   ],
   "status" : "OK"
}