javascript - google maps click event not working completely correct -

i use following script generate page

function initialize() {   var mapcanvas = document.getelementbyid('map');   var mapoptions = {center:new google.maps.latlng(latitudemid,longitudemid),zoom:15,maptypeid:google.maps.maptypeid.roadmap,streetviewcontrol:false,maptypecontrol:true,scalecontrol:true,scalecontroloptions:{position:google.maps.controlposition.top_right}};   var map = new google.maps.map(mapcanvas, mapoptions);   var i;   var insertion;   var previousmarker;   // -------------------------------   //show locations on map   // -------------------------------   (i = 0; < fotocount; i++)  {      var mylatlng=new google.maps.latlng(latituden[i], longituden[i]);      var marker = new styledmarker({styleicon:new styledicon(styledicontypes.marker,{color:'00ff00',text:letters[i]}),position:mylatlng,map:map});     marker.set('zindex', -i);     insertion='<img src=\"http://www.pdavis.nl/ams/'.concat(bestanden[i],'.jpg\"></img>');      insertion=insertion.concat('<table class=width100><tr><td>bestand: ',bestanden[i],'</td><td class=pright>lokatie: ',latituden[i],' °n., ',longituden[i],' °e. (',letters[i],')</td>');     insertion=insertion.concat('<td class=pright>genomen: ',datums[i],'</td></tr><td colspan=3>object: ',objecten[i],'</td></table>');     google.maps.event.addlistener(marker, 'click', function() {       $('#photo').html(insertion);       this.styleicon.set('color', 'ff0000');       if(previousmarker!=null){previousmarker.styleicon.set('color', '00ff00')};       previousmarker=this;       });   }   

clicking marker should 2 things: (i) turn marker red (and existing red marker green) , (ii) show appropriate photo information in right-hand panel. first work, second shows photo corresponding last marker. using "alert(insertion);" shows correct each marker.

you can't way because @ end of loop, "i" last index. , of course when click on marker, "i" value inside callback last index, should have last picture displayed.

just put insertion code inside click callback isn't enough because of value. didn't bind fix value in callback have same problem.

the following solution use marker object bind "i" value, can use in callback.

script tested on page :).

adapt want !

function initialize() {   var mapcanvas = document.getelementbyid('map');   var mapoptions = {center:new google.maps.latlng(latitudemid,longitudemid),zoom:15,maptypeid:google.maps.maptypeid.roadmap,streetviewcontrol:false,maptypecontrol:true,scalecontrol:true,scalecontroloptions:{position:google.maps.controlposition.top_right}};   var map = new google.maps.map(mapcanvas, mapoptions);   var i;   var previousmarker;   // -------------------------------   //show locations on map   // -------------------------------   (i = 0; < fotocount; i++)  {      var mylatlng=new google.maps.latlng(latituden[i], longituden[i]);      var marker = new styledmarker({styleicon:new styledicon(styledicontypes.marker,{color:'00ff00',text:letters[i]}),position:mylatlng,map:map});     marker.set('zindex', -i);     marker.myindex = i;      google.maps.event.addlistener(marker, 'click', function() {       var insertion = "";       insertion='<img src=\"http://www.pdavis.nl/ams/'.concat(bestanden[this.myindex],'.jpg\"></img>');        insertion=insertion.concat('<table class=width100><tr><td>bestand: ',bestanden[this.myindex],'</td><td class=pright>lokatie: ',latituden[this.myindex],' °n., ',longituden[this.myindex],' °e. (',letters[this.myindex],')</td>');       insertion=insertion.concat('<td class=pright>genomen: ',datums[this.myindex],'</td></tr><td colspan=3>object: ',objecten[this.myindex],'</td></table>');       $('#photo').html(insertion);       this.styleicon.set('color', 'ff0000');       if(previousmarker!=null){previousmarker.styleicon.set('color', '00ff00')};       previousmarker=this;       });   }   }