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，通过监听器与变量赋值完成；