更高效的方式來添加標記到谷歌地圖v3

Question

我正在編程構建這個JS。每個標記都由像marker_0，marker_1等單獨的變量來表示......這種方法有效，但是有沒有辦法以更高效/優雅的方式生成標記&信息窗口？

  <script type="text/javascript"> 
    var map; 

    function initialize() { 
     var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

     //************************************************************** 
     //Add 1st marker 
     //************************************************************** 
     var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>'; 
     var infowindow_0 = new google.maps.InfoWindow({ 
      content: contentString_0 
     }); 


     var image_0 = '/js/markers/marker1.png'; 
     var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
     var marker_0 = new google.maps.Marker({ 
       position: Latlng_0, 
       title:"0", 
       icon: image_0}); 

     marker_0.setMap(map); 

     google.maps.event.addListener(marker_0, 'click', function() { 
      infowindow_0.open(map,marker_0); 
     }); 

    //************************************************************** 
     //Add 2nd marker 
     //************************************************************** 
     var contentString_1='<strong>Club name: Roanoke</strong>'; 

     var infowindow_1 = new google.maps.InfoWindow({ 
      content: contentString_1 
     }); 


     var image_1 = '/js/markers/marker2.png'; 
     var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640); 
     var marker_1 = new google.maps.Marker({ 
     position: Latlng_1, 
     title:"1", 
     icon: image_1}); 

     marker_1.setMap(map); 

     google.maps.event.addListener(marker_1, 'click', function() { 
      infowindow_1.open(map,marker_1); 
     }); 


} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;    
</script> 

Answer 1

是的，你可以很容易地做到這一點：

1. 創建一組數據來描述每個標記。
2. 編寫一個函數，該函數根據該數組的一個條目中的說明添加單個標記。
3. 爲該數組中的每個條目調用該函數。

因此，您必須動態生成的唯一部分就是數據數組;所有的標記碼都是共享的。

像這樣：

var map; 

var places = [ 
    { 
     lat: 41.057814980291, 
     lng: -85.329851919709, 
     image: 'marker1', 
     title: '0', 
     club: 'Fort Wayne Time Corners' 
    }, 
    { 
     lat: 41.17805990, 
     lng: -85.4436640, 
     image: 'marker2', 
     title: '1', 
     club: 'Roanoke' 
    } 
]; 

function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(
     document.getElementById("map-canvas"), 
     mapOptions 
    ); 

    for(var i = 0; i < places.length; i++) { 
     addPlace(places[i]); 
    } 

    function addPlace(place) { 
     var content = '<strong>Club name: ' + place.club + '</strong>'; 
     var infowindow = new google.maps.InfoWindow({ 
      content: content 
     }); 

     var image = '/js/markers/' + place.image + '.png'; 
     var latlng = new google.maps.LatLng(place.lat, place.lng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      title: place.title, 
      icon: image 
     }); 

     marker.setMap(map); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map, marker); 
     }); 
    } 
} 

function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
} 

window.onload = loadScript;