javascript - Making Google maps marker array global breaks marker click event -


in page use 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;   (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;     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 marker highlights selected marker (turns red) , shows relevant photo. 2 buttons vorige , volgende (previous , next, select previous or next photo) don't work because array markers[] local 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 move "var markers=[]" outside function initialize() (this page) make array global, button highlighting (button "a" red upon start; clicked button goes red) not work. doing wrong here?

the weird thing not when pass index 0 maximum click event explodes because sending negative value, change , wonder if -1, if true passes 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 english


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -