Making Google maps marker array global breaks marker click event

Question

In this page I use the following script:

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 markers=[]; //<=========================================== inside function initialize()
  var i;
  var insertion;
  var previousMarker;
  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;
    markers.push(marker);
    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);
      if(previousMarker!=null){previousMarker.styleIcon.set('color', '00ff00')};
      this.styleIcon.set('color', 'ff0000');
      thisMarker=this.myIndex;
      previousMarker=this;
      });
    }  
  google.maps.event.trigger(markers[0], 'click');
}
  google.maps.event.addDomListener(window, 'load', initialize);

Clicking on a marker highlights the selected marker (turns red) and shows the relevant photo. The two buttons Vorige and Volgende (Previous and Next, to select previous or next photo) obviously don't work because the array markers[] is local to function initialize():

function Next() {
  thisMarker++;
  if (thisMarker>=fotoCount) {thisMarker=0};
  // following line not working
  google.maps.event.trigger(markers[thisMarker], 'click');
}
function Previous() {
  thisMarker--;
  if (thisMarker==0) {thisMarker=fotoCount-1};
  // following line not working
  google.maps.event.trigger(markers[thisMarker], 'click');
}

The obvious fix is to move "var markers=[]" outside function initialize() (this page) to make this array global, but now the button highlighting (button "A" red upon start; clicked button goes red) does not work. What am I doing wrong here?

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example); uses function closure to associate the marker with the click listeners. — geocodezip, Jun 14 '15 at 17:21

score 1 · Accepted Answer · answered Jun 14 '15 at 16:04

The only weird thing is not that when you pass the index 0 to the maximum the click event explodes because he is sending a negative value, then change that and wonder if it is -1, if true passes the greater index - 1 (Excepcion: Cannot read property '__e3ae_' of undefined)

function Previous() {
thisMarker--;
if (thisMarker==-1) {thisMarker=fotoCount-1};
// following line not working
google.maps.event.trigger(markers[thisMarker], 'click');
}

Fiddle example

sorry for my English

Hello Alimentador: thank you (I was looking in quite the wrong direction!) — Peter Beresford, Jun 14 '15 at 17:28

Making Google maps marker array global breaks marker click event

1 Answers1