javascript - Google maps API, custom marker issue (Can't really explain in the title) -

this question has answer here:

• google maps js api v3 - simple multiple marker example 11 answers

so, have following javascript code custom markers:

window.addeventlistener('load', initialise)  //initialises map view function initialise() {     var mapoptions = {         center: new google.maps.latlng(53.4113594, -2.1571162),         zoom: 14,         maptypeid: google.maps.maptypeid.roadmap     };     //creates actual map object     var map = new google.maps.map(document.getelementbyid("maparea"), mapoptions);       setmarkers(map, mylocations); } var mylocations = [     ['stockport town hall', 'this town hall. things... happen.', 'townhall.jpg', 53.406, -2.158215, 'images/markers/townhall.png'],     ['stockport town centre', 'this centre of town. there shops. , food. and... stuff', 'stockportcentre.jpg', 53.4175146, -2.1490619,         'images/markers/shopping.png'     ],     ['stockport college', 'this stockport college. learning happens.', 'stockportcollege.jpg', 53.4040427, -2.1587963, 'images/markers/learning.png'],     ['stockport train station', 'this train station. catch trains.', 'stockporttrainstation.jpg', 53.4056234, -2.1637525, 'images/markers/train.png']  ];    function setmarkers(map, mylocations) {     (var in mylocations) {         var name = mylocations[i][0];         var info = mylocations[i][1];         var image = mylocations[i][2];         var lat = mylocations[i][3];         var lng = mylocations[i][4];         var indivicon = mylocations[i][5];         var latlngset;         latlngset = new google.maps.latlng(lat, lng);          var marker = new google.maps.marker({             map: map,             title: name,             position: latlngset,             icon: indivicon         });           //content here!          var infocontent = '<h3>' + name + '</h3>' + info +             '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';            var infowindow = new google.maps.infowindow();          google.maps.event.addlistener(             marker, 'click',             function() {                 infowindow.setcontent(infocontent);                 infowindow.open(map, this);             });      } } 

now, markers work fine. can open them up, auto-close , go other markers, weird issue is: infowindows show "stockport train station" information , have no idea why. i'm doing wrong here?

so what's happening this. you're looping on locations, creating marker each one, , that's fine. , each marker, you're creating event listener, gets called when marker clicked on.

within loop, you're doing every marker, updating value of infocontent variable each time:

var infocontent = "..."; 

so @ end of loop, infocontent equal whatever set last marker, like

'<h3>stockport train station</h3> etc...' 

so whenever click on of markers, executes function:

infowindow.setcontent(infocontent); infowindow.open(map, this); 

so correctly opens current marker. , sets content of infowindow whatever infocontent is... i.e. value given @ end of loop.

instead try this, set content property on marker, use that:

    var infocontent = '<h3>' + name + '</h3>' + info +         '<br /><img width = "128" height = "128" src = "images/' + image + ' " ' + '</div>';      var marker = new google.maps.marker({         map: map,         title: name,         position: latlngset,         icon: indivicon,         content: infocontent      }); 

and in event listener can refer directly:

google.maps.event.addlistener(         marker, 'click',         function() {             infowindow.setcontent(this.content);             infowindow.open(map, this);         });