谷歌地图的引用

1首先引入谷歌地图的API

<!--引用谷歌地图API-->

<script src= "http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false" ></script>

注意这边的key

2自定义初始化谷歌地图的方法，并调用 InitGoogleMap(shopCoordinates)，这里由原来工程的ajax取到的数据。 shopCoordinates的内容如图所示（参考时应根据不同场景适当改变）

3， InitGoogleMap的方法：

获取到第一条数据的值作为中心点 centerPointShopInfo，取到其对应的地址，和信息。

定义地图配置：

var mapProp = {

     //center:new google.maps.LatLng(51.508742,-0.120850),

     center:new google.maps.LatLng(centerPointCoordinateArr[0], centerPointCoordinateArr[1]),

     zoom:12,

     mapTypeId:google.maps.MapTypeId.ROADMAP

};

定义地图，带入容器和配置

var map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);

循环放入marker

 如上面所见的参数是数组，地图中可以添加多个marker。，通过 initGoogleMarker方法。

4，initGoogleMarker方法

其中带入了这几个参数：点ggPoint，内容shopCoorDinateAddress，地图map，第几个num

重点：在方法外定义一个 iw_=null;用于存放之前的infoWindow，做个记录为了防止打开多个iw

function initGoogleMarker(ggPoint,shopCoordinateAddress,map,num){
var marker = "marker_"+num;   //生成组件名字
var infowindow = "infowindow_"+num;//生成组件名字
marker = new google.maps.Marker({
position:ggPoint,
icon:" ${base} /resources/shop/images/icon.png"

});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
  if(iw_!=null){
      iw_.close();
     }//判断是否为空

  var iw = new google.maps.InfoWindow({content:            shopCoordinateAddress});

  iw.open(map, marker); 
  iw_ = iw;//记录之前打开的提示框
});

}

首先  var marker = "marker_”+num;是为了不同的iw，防止因为循环只取到最后的东西。

marker定义了点与marker的样式。

marker.setMap(map);将marker放入地图里。

添加谷歌提供的监听器，如果iw_不为空则将上一个打开的iw_给关闭。重新打开。

这个功能亮点在于：

1，防止所有的marker的值都取到的是最后一个，通过命名时拼接num完成；

2，防止打开过多的infoWindow，通过监听器与变量赋值完成；