javascript - When a marker lies behind open infobox - Event mouseover with InfoBox plugin Google Maps API v3 -


i'm having trouble v3 of google maps api , using infobox plugin respect usability issue use case:

since map requires custom infobox opened upon hovering mouse on each respective marker, when map has 2 markers on close in proximity, when/if 1 of markers lies behind infobox open after hovering other close-by marker, triggered when mousing on marker (even though it's behind open infobox) , other infobox obstructs currently/previously opened infobox

i've followed question , answer process poster here: google maps api v3 event mouseover infobox plugin , have followed recommended code, can't wrap mind around how prevent markers lie behind open infobox not triggered until infobox closed.

var gpoints = [];  function initializemap1() {      var map1milelatlang = new google.maps.latlng(39.285900,-76.570000);     var map1mileoptions = {       maptypecontroloptions: {             maptypeids: [ 'styled']         },        maptypecontrol: false,         zoom: 14,       center: map1milelatlang,       //maptypeid: google.maps.maptypeid.roadmap,        maptypeid: 'styled'      };     var map1mile = new google.maps.map(document.getelementbyid("map_canvas"), map1mileoptions);     var styledmaptype = new google.maps.styledmaptype(styles, { name: 'styled' });//new     map1mile.maptypes.set('styled', styledmaptype);//new     ( var i=0; i<5; i++ ) {             gpoints.push( new point(map1mile) );             gpoints.push( new point2(map1mile) );    }  function popup(_point) {         _point.popup = new infobox({             content:            _point.content,             pane:               'floatpane',             closeboxurl:        '',             alignbottom:        1         });          _point.popup.open(_point.marker.map, _point.marker);              google.maps.event.addlistener(_point.popup, 'domready', function() {             //have put within domready or else can't find div element (it's null until infobox opened)                  $(_point.popup.div_).hover(                     function() {                         //this called when mouse enters element                     },                     function() {                         //this called when mouse leaves element                         _point.popup.close();                     }                 );             });       }   function point(_map) {         this.marker = new google.maps.marker({             position:           new google.maps.latlng(39.291003,-76.546234),             map:                _map         });          this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">just try click me!</a><br/>hovering on text result in <code>mouseout</code> event firing on <code>map-popup</code> element , disappear.</div></div>';          // scope         var gpoint = this;          // events         google.maps.event.addlistener(gpoint.marker, 'mouseover', function() {             popup(gpoint);     });      }     function point2(_map) {         this.marker = new google.maps.marker({             position:           new google.maps.latlng(39.295003,-76.545234),             map:                _map         });          this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">just try click me!</a><br/>hovering on text result in <code>mouseout</code> event firing on <code>map-popup</code> element , disappear.</div></div>';          // scope         var gpoint = this;          // events         google.maps.event.addlistener(gpoint.marker, 'mouseover', function() {             popup(gpoint);         });     } 

after doing experimenting, suspect issue irrelevant z-index... correct in understanding needs caught in javascript?

any or advice appreciated!

adding optimized: false attribute markers should solve problem.

this.marker = new google.maps.marker({         position:           new google.maps.latlng(39.295003,-76.545234),         map:                _map,         optimized:          false     }); 

Comments

Popular posts from this blog

objective c - Change font of selected text in UITextView -

php - Accessing POST data in Facebook cavas app -

c# - Getting control value when switching a view as part of a multiview -