Информационное окно при нажатии на маркер google maps ap

Question

В приведенном коде я пытаюсь отобразить некоторые снимки, которые у меня есть в моей базе данных, как только я нажму на любой из маркеров на картах Google. Каждый маркер связан с изображением.

Моя проблема основана на последней части кода, в цикле las «for». Когда я console.log (контент), я вижу все мои теги изображений, отображаемые с правильным URL-адресом изображения, но когда я нажимаю на любой из маркеров, я вижу только последнее изображение на массиве picturesForMarkers. Кто-нибудь знает, что я делаю неправильно?

Javascript

var addresses = []; 
var picturesForMarkers = []; 
var divPictureLatitude = $('.pictures'); 
$.each(divPictureLatitude, function (i, val) { 
    addresses.push(val.children[1].value + ", " + val.children[2].value); 
    picturesForMarkers.push(val.children[0].src); 

}); 

var infowindow = new google.maps.InfoWindow(); 
var marker, i; 

for (var x = 0; x < addresses.length; x++) { 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 
    }); 
} 


for (var x = 0; x < picturesForMarkers.length; x++) { 
    google.maps.event.addListener(marker, 'click', (function (marker, x) { 
     return function() { 
      var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">'; 
      console.log(content) 
      infowindow.setContent(content); 
      infowindow.open(map, marker); 
     } 
    })(marker, x)); 
} 

Answer 1

переменной , что вы используете в последнем цикле на самом деле undefined, это не имеет никакого значения из-за того, что вы объявляя новую переменную внутри обратного вызова вызова JSon.

Я хотел бы попробовать это:

var addresses = []; 
var picturesForMarkers = []; 
var divPictureLatitude = $('.pictures'); 
$.each(divPictureLatitude, function (i, val) { 
    addresses.push(val.children[1].value + ", " + val.children[2].value); 
    picturesForMarkers.push(val.children[0].src); 

}); 

var infowindow = new google.maps.InfoWindow(); 
var i; // I removed marker. 

for (var x = 0; x < addresses.length; x++) { 
    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) { 
     var p = data.results[0].geometry.location; 
     var latlng = new google.maps.LatLng(p.lat, p.lng); 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 
     // The marker has been added to the map, add the event to the marker. 
     google.maps.event.addListener(marker, 'click', (function (marker, x) { 
      return function() { 
       var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">'; 
       console.log(content); 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      }; 
     })(marker, x)); 
    }); 
} 

Answer 2

кажется, что ваша проблема может быть у вас есть только один маркер объявлен. Попробуйте создать массив или список маркеров и прикрепить ссылку на изображение к каждому из них, а не передавать в единственной переменной маркера каждый раз.