Содержимое нескольких маркеров, отображающих то же местоположение

Question

Я пытался отобразить несколько маркеров с контентом. Это код, я using-

var latitude=[10,20,30]; 
var longitude=[10,20,30]; 
var address=["Test1","Test2","Test3"]; 

function initialize() { 
    var mapObject = { 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("googleMap"), mapObject); 
    loadMarkers(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

function loadMarkers() { 
    for (var i = 1; i < latitude.length; i++) { 
     var markerCenter = new google.maps.LatLng(latitude[i], longitude[i]); 
     var marker = new google.maps.Marker({ 
      position: markerCenter, 
      animation: google.maps.Animation.BOUNCE 
     }); 
     marker.setMap(map); 
     marker.info = new google.maps.InfoWindow({ 
      content: address[i] 
     }); 
     markers.push(marker); 
     google.maps.event.addListener(marker, 'click', function() { 
      marker.info.open(map, marker); 
     }); 
    } 
} 

Проблема заключается в том, что она всегда показывает последний адрес адреса массива. Может ли кто-нибудь мне помочь?

Answer 1

В коде отсутствует кое-что. Как начальный масштаб и центр карты.

Но вот что: - введите 1 infowindow и используйте его снова и снова. - Я вижу, у вас есть markers.push (маркер); в вашем коде. Это хорошо (возможно, вы видели одну из моих других сообщений). Когда у вас есть этот массив (объектов маркера), вы можете увидеть, какой маркер был нажат на

Я думаю, что это то, что вы хотите.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
var latitude=[10, 20, 30]; 
var longitude=[10, 20, 30]; 
var address=["Test1", "Test2", "Test3"]; 
var markers = []; // store the marker objects here 
var infoWindow; 

function initialize() { 
    var mapObject = { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    zoom: 4, 
    center: new google.maps.LatLng(latitude[1], longitude[1]) // let's take the middle marker as center 
    }; 
    map = new google.maps.Map(document.getElementById("googleMap"), mapObject); 
    loadMarkers(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

function loadMarkers() { 
    for (var i=0; i<=latitude.length; i++) { 
    var markerCenter = new google.maps.LatLng(latitude[i], longitude[i]); 
    var marker = new google.maps.Marker({ 
     position: markerCenter, 
     // animation: google.maps.Animation.BOUNCE, 
     map: map // replaces marker.setMap(map); 
    }); 
    markers.push(marker); // store the marker in the array 
    // click on the marker 
    google.maps.event.addListener(marker, 'click', function() { 
     // first we want to know which marker the client clicked on. 
     var i=markers.indexOf(this); 
     // we set the content of infoWindow, then we open it. 
     infoWindow.setContent(address[i]) 
     infoWindow.open(map, markers[i]); 
    }); 
    } 
    // make 1 infowindow. We will use it again and again 
    infoWindow = new google.maps.InfoWindow({ 
    content: '' 
    }); 
} 
</script> 
<style> 
#googleMap { 
    height: 400px; 
} 
</style> 
<div id="googleMap"></div>