i got an api endpoint that returns an array of addresses and some price information for the addresses but it doesn't return lat/lang, so i am using geocode to show the marker for the addresses on the map and showing infowindow on each marker click. Now i want the content of infowindow to be the price for the address which is in the array returned from endpoint. hope its clear so far. Now the problem is everytime i click marker, infowindow only shows last(same) price from array on each infowindow but not the price related to that address. please see my code below (or check in fiddlejs = > https://jsfiddle.net/puLxak1k/7/). It could be i am trying to call sync in asyn callback, so i tried using $q.promise and resolve on initial api call and tried calling geocode.geocoder inside .then, but no luck yet..
<div id="map-canvas"></div>
function initialize() {
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
geocoder = new google.maps.Geocoder()
var someArray = [{price: 10, address: 'cv64ad'}, {price: 20, address: 'cv59bp'}]
for (var i = 0; i < someArray.length; i++) {
var home = someArray[i]
console.log(home.address)
geocoder.geocode({'address': home.address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(12);
for (var i in results) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(results[i].geometry.location.A, results[i].geometry.location.F),
map: map
})
google.maps.event.addListener(marker, 'click', someCallback(home))
infowindow = new google.maps.InfoWindow();
function someCallback(home) {
return function (e) {
if (infowindow != null) {
infowindow.close();
}
infowindow.setContent('<div class="infoheading">' + home.price + '</div>');
infowindow.open(map, this);
}
}
}
}
})
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Like this: https://jsfiddle.net/jvxppeap/2/
The trick is: make an array that holds the marker objects. Then, inside addListener(marker, 'click' ... you check which of the markers has been clicked upon; look at "indexOf" in my code. With that index, you can read the right item of someArray, and you can add any information you want there.