Google Map API-Implementierung mit variabler Aufruf

Question

Dies ist mein Google Map-Code unten:

<div id="map_canvas" style="width: 500px; height: 400px;"></div> 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
InitMap("[['Leslie Fleming',41.977, -71.3248, 1 ],['Chris Reale',41.977, -71.3248, 2 ],['Michael Anello',41.977, -71.3248, 3 ],['Ed Pariseau Jr',41.977, -71.3248, 4 ],['Ryan Higgens',41.977, -71.3248, 5 ]]", "41.977, -71.3248"); 
function InitMap(MapElement, MapPointer){ 
    var locations = MapElement; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: new google.maps.LatLng(MapPointer), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
} 
</script> 

Warum es nicht funktioniert? Mache ich etwas falsch?

Answer 1

Siehe den Code Ich habe es zu lösen. Dies ist eine Mehrfachmarker-Google-Karte. Sie können es über AJAX verwenden. Ich muss keinen Programmierer einstellen. Ich kann es lösen.

<div id="map_canvas" style="width: 500px; height: 400px;"></div> 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248); 
function InitMap(MapElement, latitude, longitude){ 
    var locations = MapElement; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: new google.maps.LatLng(latitude, longitude), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
} 
</script> 

Answer 2

Siehe den Code Ich habe es gelöst. Dies ist eine Mehrfachmarker-Google-Karte. Sie können es über AJAX verwenden. Ich muss keinen Programmierer einstellen. Ich kann es lösen.

<div id="map_canvas" style="width: 500px; height: 400px;"></div> 

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
InitMap([["Leslie Fleming",41.977, -71.3248, 1 ],["Chris Reale",41.977, -71.3248, 2 ],["Michael Anello",41.977, -71.3248, 3 ],["Ed Pariseau Jr",41.977, -71.3248, 4 ],["Ryan Higgens",41.977, -71.3248, 5 ]], 41.977, -71.3248); 
function InitMap(MapElement, latitude, longitude){ 
    var locations = MapElement; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 10, 
     center: new google.maps.LatLng(latitude, longitude), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 
} 
</script>