CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Peter Beresford
Peter Beresford

Reputation: 63

google maps click event not working completely correct

I use the following script to generate this 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 the map
  // -------------------------------
  for (i = 0; i < 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 a marker should do two things: (i) turn the marker red (and any existing red marker green) and (ii) show the appropriate photo with information in the right-hand panel. The first does work, but the second always shows the photo corresponding to the last marker. Using "alert(insertion);" shows that this is correct for each marker.

Upvotes: 0

Views: 63

Answers (2)

Payou
Payou

Reputation: 371

You can't do it this way because at the end of the loop, "i" will always be the last index. And of course when you click on a marker, "i" value inside the callback is the last index, so you should always have the last picture displayed.

Just put insertion code inside your click callback isn't enough because of the i value. You didn't bind anything to fix value in your callback so you will have the same problem.

The following solution use the marker object to bind the "i" value, like this you can use it in your callback.

Script tested on your page :).

Adapt it as you 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 the map
  // -------------------------------
  for (i = 0; i < 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;
      });
  }  
}

Upvotes: 1

bjaksic
bjaksic

Reputation: 3313

insertion should be an array. This way when you iterate, in eacj iteration you are just overwriting the content of insertion. In the end you have last value from image array as insertion.

var insertionArr = [];
...
insertion=insertion.concat('<td class=pright>Genomen: ',Datums[i],'</td></tr><td colspan=3>Object: ',Objecten[i],'</td></table>');
insertionArr[marker] = insertion; // Add it to the array

google.maps.event.addListener(marker, 'click', function() {
  $('#photo').html(insertionArr[this]);// get it from the array
  ...
});

This is not tested code.

Upvotes: 0

Related Questions