title: When a marker lies behind open infobox - Event mouseover with InfoBox plugin Google Maps API v3
body: <p>I'm having trouble with v3 of the Google Maps API and using the InfoBox plugin specifically with respect to this usability issue use case:</p>
  
  <p>Since my map requires a custom infobox to be opened upon hovering the mouse over each respective marker, when the map has 2 markers on it that are close in proximity, even when/if one of the markers lies behind an infobox that is currently open after hovering the other close-by marker, it is triggered when mousing over it marker (even though it's behind the currently open infobox) and the other infobox obstructs the currently/previously opened infobox</p>
  
  <p>I've followed the question and answer process by another poster here: <a href="https://stackoverflow.com/questions/5429444/google-maps-api-v3-event-mouseover-with-infobox-plugin">Google Maps API v3 Event mouseover with InfoBox plugin</a> and have followed the recommended code, but i can't wrap my mind around how to prevent markers that lie BEHIND an open infobox to not be triggered until that infobox is closed.</p>
  
  <pre><code>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
  
     for ( var i=0; i&lt;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 to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
  
                  $(_point.popup.div_).hover(
                      function() {
                          //This is called when the mouse enters the element
                      },
                      function() {
                          //This is called when the mouse leaves the 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 = '&lt;div class="map-popup" style="width:100px;"&gt;&lt;div class="map-popup-window"&gt;&lt;div class="map-popup-content"&gt;&lt;a href="http://www.google.com/"&gt;Just try to click me!&lt;/a&gt;&lt;br/&gt;Hovering over this text will result in a &lt;code&gt;mouseout&lt;/code&gt; event firing on the &lt;code&gt;map-popup&lt;/code&gt; element and this will disappear.&lt;/div&gt;&lt;/div&gt;';
  
          // 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 = '&lt;div class="map-popup" style="width:100px;"&gt;&lt;div class="map-popup-window"&gt;&lt;div class="map-popup-content"&gt;&lt;a href="http://www.google.com/"&gt;Just try to click me!&lt;/a&gt;&lt;br/&gt;Hovering over this text will result in a &lt;code&gt;mouseout&lt;/code&gt; event firing on the &lt;code&gt;map-popup&lt;/code&gt; element and this will disappear.&lt;/div&gt;&lt;/div&gt;';
  
          // Scope
          var gpoint = this;
  
          // Events
          google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
              popup(gpoint);
          });
      }
  </code></pre>
  
  <p>After doing experimenting, i suspect this issue is irrelevant to z-index... am i correct in understanding this needs to be caught in the javascript?</p>
  
  <p>Any help or advice would be greatly appreciated!</p>