javascript - Showing content from an Array inside infowindow on marker click -

i got api endpoint returns array of addresses , price information addresses doesn't return lat/lang, using geocode show marker addresses on map , showing infowindow on each marker click. want content of infowindow price address in array returned endpoint. hope clear far. problem everytime click marker, infowindow shows last(same) price array on each infowindow not price related address. please see code below (or check in fiddlejs = > https://jsfiddle.net/pulxak1k/7/). trying call sync in asyn callback, tried using $q.promise , resolve on initial api call , tried calling geocode.geocoder inside .then, 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'}]     (var = 0; < 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);           (var 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 array holds marker objects. then, inside addlistener(marker, 'click' ... check of markers has been clicked upon; @ "indexof" in code. index, can read right item of somearray, , can add information want there.

var markers = []; var map; var infowindow; 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'}];    (var = 0; < 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);         (var 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           });           // push marker on markers array           markers.push(marker);           google.maps.event.addlistener(marker, 'click', function (home) {               if (infowindow != null) {                 infowindow.close();               }               // now, want know of markers we're talking               var index = markers.indexof(this);               infowindow.setcontent('<div class="infoheading">' + somearray[index].price + '</div>');               infowindow.open(map, this);           });           infowindow = new google.maps.infowindow();         }       }     })   } } google.maps.event.adddomlistener(window, 'load', initialize);