2014-09-15 2 views
0

Я только начал работать с API Карт Google и пытаюсь отобразить несколько маркеров по массиву данных.API Карт Google - массив маркеров, показывающий только первый маркер

Однако я получаю маркер только для первого места в моем списке, что, я думаю, мой цикл работает неправильно, но я не получаю никаких ошибок для работы.

var mapOptions = { 
     center: centralLatlng, 
     zoom: 2 
    }; 

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

    var cdnLocations = [ 
     ['LondonMarker', 51.500, 0.1167], 
     ['NewYorkMarker', 40.7127, -74.0059], 
     ['TokyoMarker', 35.6895, 139.6917], 
     ['BerlinMarker', 52.5167, 13.3833], 
     ['ParisMarker', 48.8567, 2.3508], 
     ['MadridMarker', 40.4000, 3.6833], 
    ] 


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

    }); 
    } 

ответ

1

Проверьте это:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 
</head> 
<body> 
<div id="map" style="width: 500px; height: 400px;"></div> 

<script type="text/javascript"> 
var locations = [ 
    ['LondonMarker', 51.500, 0.1167], 
    ['NewYorkMarker', 40.7127, -74.0059], 
    ['TokyoMarker', 35.6895, 139.6917], 
    ['BerlinMarker', 52.5167, 13.3833], 
    ['ParisMarker', 48.8567, 2.3508], 
    ['MadridMarker', 40.4000, 3.6833], 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 1, 
    center: new google.maps.LatLng(35.68, 139.69), 
    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> 
</body> 
</html> 

Вот в jsfiddle Например: http://jsfiddle.net/m2htynto/

+0

Эй спасибо это здорово. – Hopeless

Смежные вопросы