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，通過監聽器與變量指派完成；