title: Google Maps API v3 Event mouseover with InfoBox plugin
body: <p>I'm mucking around with v3 of the Google Maps API and using the InfoBox plugin (part of the <a href="http://google-maps-utility-library-v3.googlecode.com/" rel="nofollow noreferrer">http://google-maps-utility-library-v3.googlecode.com/</a> suite) in conjunction to make some nicely styled info windows that react to marker interactions.</p>
  
  <p>For this particular experiment, I've attempted to get the InfoBox window pop-up when the marker has been hovered over and out, however I've struggled to resolve the issue with the event system regarding mouseover/mouseout on the InfoBox window. What happens is that I can locate the DIV and use a <code>google.maps.event.addDomListener</code> to attach a mouseover and mouseout event to the InfoBox, except it's too fiddly -- when I mouseover a child node within the InfoBox, it counts as a mouseout on the parent node and fires the event.</p>
  
  <p>Is this somehow related to propagation? I know InfoBox has a <code>enableEventPropagation</code> switch when you create a new InfoBox, but I'm not quite sure how and why it would be used.</p>
  
  <p>The aim of the experiment is to create an info window with related links inside that appears on mouseover of the marker. You can then move the mouse inside the info window and interact and when you mouse out it will close the info window. I've tried another method where the mouseover on the marker triggers an external function that creates an external info window element that's positioned and has its own event handling. That works fine, but the layering of the custom info window on top of the map means that when you mouse over another marker in close proximity (under the custom info window) it can't register the mouseover for the marker.</p>
  
  <p>This was my attempt at the InfoBox method:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
   &lt;head&gt;
   &lt;style type="text/css"&gt;
   &lt;!--
      #map {
          width:                  800px;
          height:                 600px;
          margin:                 50px auto;
      }
  
      .map-popup {
          overflow:               visible;
          display:                block;
      }
  
      .map-popup .map-popup-window {
          background:             #fff;
          width:                  300px;
          height:                 140px;
          position:               absolute;
          left:                   -150px;
          bottom:                 20px;
      }
  
      .map-popup .map-popup-content {
          padding:                20px;
          text-align:             center;
          color:                  #000;
          font-family:            'Georgia', 'Times New Roman', serif;
      }
   --&gt;
   &lt;/style&gt;
   &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
  
      var gmap, gpoints = [];
  
      function initialize() {
          gmap = new google.maps.Map(document.getElementById('map'), {
              zoom:               9,
              streetViewControl:  false,
              scaleControl:       false,
              center:             new google.maps.LatLng(-38.3000000,144.9629796),
              mapTypeId:          google.maps.MapTypeId.ROADMAP
          });
  
          for ( var i=0; i&lt;5; i++ ) {
              gpoints.push( new point(gmap) );
          }
      }
  
      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)
              google.maps.event.addDomListener(_point.popup.div_, 'mouseout', function() {
                  _point.popup.close();
              });
          });
      }
  
      function point(_map) {
          this.marker = new google.maps.Marker({
              position:           new google.maps.LatLng(-37.8131869 - (1 * Math.random()),144.9629796  + (1 * Math.random())),
              map:                _map
          });
  
          this.content = '&lt;div class="map-popup"&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);
          });
      }
  
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body onload="initialize()"&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>So I guess if anyone knows how to make this work and respond properly (or provide relevant tips/tricks) then that would be great!</p>