javascript - Google maps styled marker z-index change not working -
in this page trying bring clicked (styled) marker (or 1 selected using vorige/volgende - previous/next - buttons) top setting zindex google.maps.marker.max_zindex + 1 (and restoring zindex previous value upon marker being clicked) using
this.styleicon.set('zindex', google.maps.marker.max_zindex + 1);
in following code:
var thismarker; var markers=[]; var map; var zoem=0; function initialize() { var mapcanvas = document.getelementbyid('map'); var mapoptions = {center:new google.maps.latlng(latitudemid,longitudemid),zoom:zoom,maptypeid:google.maps.maptypeid.roadmap,streetviewcontrol:false,maptypecontrol:true,scalecontrol:true,scalecontroloptions:{position:google.maps.controlposition.top_right}}; map = new google.maps.map(mapcanvas, mapoptions); var i; var insertion; var previousmarker; var previouszindex; (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'); // -------------------------------------------- set zindex previousmarker.styleicon.set('zindex', previouszindex); // ------------------------------------------------------- } this.styleicon.set('color', 'ff0000'); this.styleicon.set('zindex', google.maps.marker.max_zindex + 1); thismarker=this.myindex; if (zoem==1) //moet nu inzoemen { map.setcenter(new google.maps.latlng(latituden[thismarker], longituden[thismarker])); map.setzoom(18); } if (zoem==2) //moet nu uitzoemen { map.setcenter(new google.maps.latlng(latitudemid,longitudemid)); map.setzoom(zoom); zoem=0; } previousmarker=this; previouszindex=this.zindex; }); google.maps.event.adddomlistener(document.getelementbyid('volgende'), 'click', nextevent); google.maps.event.adddomlistener(document.getelementbyid('vorige'), 'click', previousevent); google.maps.event.adddomlistener(document.getelementbyid('zoemer'), 'click', zoemerevent); } google.maps.event.trigger(markers[0], 'click'); } function nextevent() { thismarker++; if (thismarker>=fotocount) {thismarker=0}; google.maps.event.trigger(markers[thismarker], 'click'); } function previousevent() { thismarker--; if (thismarker==-1) {thismarker=fotocount-1}; google.maps.event.trigger(markers[thismarker], 'click'); } function zoemerevent() { if (zoemer.value == 'niet inzoemen op selectie') {zoemer.value = 'inzoemen op selectie'; zoem=2;} else {zoemer.value = 'niet inzoemen op selectie'; zoem=1;} google.maps.event.trigger(markers[thismarker], 'click'); }
this not work. cannot find documentation of zindex styled markers, assume should set analagous setting colour (which work me).
try adding zindex directly in marker creation
var marker = new styledmarker({styleicon:new styledicon(styledicontypes.marker,{zindex: -1, color:'00ff00',text:letters[i]}),position:mylatlng,map:map});
Comments
Post a Comment