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
Post a Comment