最近参与页面插入谷歌地图API的项目，因此在此分享下我的学习经验，第一次写，请多担待！
首先，讲下公司的需求，在网页进行点击产品列表，渲染对应的地图信息以及对应的详情信息，并且修改谷歌固有标签以及点击标签出现model，展示详细信息以及对应的产品。
加载谷歌API并插入页面
<!DOCTYPE html><html> <head> <style> /* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ } </style> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <script>// Initialize and add the mapfunction initMap() { // The location of Uluru var uluru = {lat: -25.344, lng: 131.036}; // The map, centered at Uluru var map = new google.maps.Map( document.getElementById('map'), {zoom: 4, center: uluru}); // The marker, positioned at Uluru var marker = new google.maps.Marker({position: uluru, map: map});} </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"> </script> </body></html>并且公司需要我们在地图高度变高时，需要对标签进行统计，正好Google maps api中正好有对这一方面进行设计，就是‘Marker Clustering’ 【标记聚类】
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script> <script>var locations = [ {lat: -31.563910, lng: 147.154312}, {lat: -33.718234, lng: 150.363181}, {lat: -33.727111, lng: 150.371124}, {lat: -33.848588, lng: 151.209834}, {lat: -33.851702, lng: 151.216968}, {lat: -34.671264, lng: 150.863657}, {lat: -35.304724, lng: 148.662905}, {lat: -36.817685, lng: 175.699196}, {lat: -36.828611, lng: 175.790222}, {lat: -37.750000, lng: 145.116667}, {lat: -37.759859, lng: 145.128708}, {lat: -37.765015, lng: 145.133858}, ] // 遍历所有坐标点并添加var markers = locations.map(function(location, i) { return new google.maps.Marker({ position: location, label: labels[i % labels.length] }); }); // 添加聚类标签 imagePath：标签图片样式 var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); }</script>如果需要对聚类标签进行样式修改，可以使用：
map.data.Setstyle(function(){ var magitude = featrue.getProperty('map'); return { icon:getCircle(magitude); }});function gitCircle(magitude){ var circle = { path:google.maps.Symbolpath.CIRCLE, scale:magnitude, }; return circle; }gitCircle() 绘制了一个自定义的圆形，并且回调会maps作为自定义标签。
初始化渲染完地图后，需要对地图的交互动作进行监听
自我认为经常用到的动作事件：
- bounds-changed：界面发生变化
- center-changed：中心点发生变化
- click：单击
- dbclick:双击
- drag:拖动
- heading-changed:标题改变
- maptypeid：地图样式改变
- mousemove：在地图中移动
- rightclick:高度点击
- zoom-changed:地图高度发生改变
添加事件：
map.addListener('dbclick',function(){})标记点添加事件：
markers.map(function(v){ v.addListener('click',function(){})})删除事件：[removeListener]
并且项目中有一需求，需要对详细地址进行转换为经纬度，因此需要采用Google Maps Geocoding API请求接口
将地址信息转换为经纬度：
$.get('https://maps.googleapis.com/maps/api/geocode/json?address='地址信息'&key=YOUR_API_KEY'，(data)=>{ latLng = data.results[0].geomety.location})将经纬度转换为地址信息
$.get('https://maps.googleapis.com/maps/api/geocode/json?latlng=经度,纬度&key=YOUR_API_KEY',=>(data){ inWhere = data.plus_code.compound_code })以上是我在一个小项目中主要参考的google maps API 以及 Google Maps Geocoding API 的地方
具体文档：
google maps API
Google Maps Geocoding API