Creating google map with multiple markers using jquery .each() -

i have read posts creating google map multiple markers , cant seem working correctly. have results page lists out addresses based on user selection on search form. grabbing addresses .each loop , adding them array. using .each loop geocode addresses , create markers on map. here have tried:

$(function() {     var address = [];     var price = [];     var image = [];     $('ul.property-list li').each(function(n) {         var street = $('ul.property-list li .property-text .street').text();         var city = $('ul.property-list li .property-text .city').text();         price[n] = $('ul.property-list li .price').text();         image[n] = $('ul.property-list li .property-image img').attr('src');         address[n] = street+','+city;     });      // google maps api     var geocoder;     var map;     function initialize() {         geocoder = new google.maps.geocoder();         $.each(address, function(n) {             if (n<10) {                 geocoder.geocode( {'address': address[n]}, function(results, status) {                     if (status == google.maps.geocoderstatus.ok) {                         var marker = new google.maps.marker({                             map:map,                             position: results[n].geometry.location                         });                         var infocontent = '<div style="width:250px;overflow:hidden;"><img style="float:left;width:100px;margin-right:8px;" src="'+image[n]+'" /><div><div style="font-weight:700;font-size:20px;padding-bottom:5px;">$'+price[n].tolocalestring()+'</div>'+address[n]+'</div></div>';                         var infowindow = new google.maps.infowindow ({                             content: infocontent                         });                         google.maps.event.addlistener(marker, 'click', function() {                             infowindow.open(map,marker);                         });                     }                     if (n == 0) {                         map.setcenter(results[0].geometry.location);                     }                 });             }          });         map = new google.maps.map(document.getelementbyid('map2'), mapoptions);         var mapoptions = {             zoom:14,         }      }     initialize();        }); 

i not receiving errors in firebug , have used code single address not sure mistake when attempting use .each. awesome has been stumping me while now.

edit

ok have drawing map issue running when there more 1 address creating single marker , placing content both markers in same infowindow can see referring in fiddle have created: http://jsfiddle.net/a7n465az/5/

take close @ section of code:

var marker = new google.maps.marker({     map:map,     position: results[n].geometry.location }); 

you using n index results array, n index price, image, , address arrays, use same array index corresponding elements.

however, results not 1 of parallel arrays. it's independent array passed geocoder.geocode() callback function. length unrelated length of other 3 arrays, , n wrong index use. want 0 here instead, use later in function when setting map center:

var marker = new google.maps.marker({     map:map,     position: results[0].geometry.location }); 

also, make strong recommendation on 1 programming technique. instead of creating separate arrays price, image, , address, much better off if create single array 3 of values. make each element of array object 3 properties.

for example, let's call array places, , individual element of array place place.price, place.image, , place.address properties.

then code might this:

$(function() {     var places = [];     $('ul.property-list li').each(function(n) {         var street = $('ul.property-list li .property-text .street').text();         var city = $('ul.property-list li .property-text .city').text();         places.push({             price: $('ul.property-list li .price').text(),             image: $('ul.property-list li .property-image img').attr('src'),             address: street + ',' + city         });     });      // google maps api     var geocoder;     var map;      function initialize() {         geocoder = new google.maps.geocoder();         $.each( places, function( n, place ) {             if (n >= 10) return false;  // done             geocoder.geocode({                 'address': place.address             }, function(results, status) {                 if (status == google.maps.geocoderstatus.ok) {                     var marker = new google.maps.marker({                         map: map,                         position: results[0].geometry.location                     });                     var infocontent =                         '<div style="width:250px;overflow:hidden;">' +                             '<img style="float:left;width:100px;margin-right:8px;" src="' +                                 place.image + '" />' +                             '<div><div style="font-weight:700;font-size:20px;padding-bottom:5px;">$' +                                 place.price.tolocalestring() +                             '</div>' + place.address +                         '</div></div>';                     var infowindow = new google.maps.infowindow({                         content: infocontent                     });                     google.maps.event.addlistener(marker, 'click', function() {                         infowindow.open(map, marker);                     });                 }                 if (n == 0) {                     map.setcenter(results[0].geometry.location);                 }             });         });          map = new google.maps.map(document.getelementbyid('map2'), mapoptions);         var mapoptions = {             zoom: 14,         }      }     initialize(); }); 

this may not seem big difference, trust me (voice of many years' experience) make code easier work maintain , extend it.

(and please forgive of code reformatting isn't taste - changed bit shorten lines , make differences more visible.)