title: How can I have a popup Google Map appear when the user hovers over an address?
body: <p>I want to set up my site so that whenever a user hovers over an address, a small google map of that address pops up. I've been reading through the Google Maps API documentation, but I'm having a hard time finding a simple way to implement this. It seems I have to use what google calls "geocoding" to find the latitude and longitude based on the address... This is the test page I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;style type="text/css"&gt;
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% }
          &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"&gt;
              var geocoder;
              var map;
  
              function codeAddress(address) {
                  geocoder = new google.maps.Geocoder();
                  geocoder.geocode( { 'address': address}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      var myOptions = {
                        zoom: 20,
                        center: results[0].geometry.location,
                        mapTypeId: google.maps.MapTypeId.SATELLITE
                      }
                      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    } else {
                      alert("Geocode was not successful for the following reason: " + status);
                    }
                  });
              }
          &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;div onMouseOver="codeAddress('1405 Harrison Street, Oakland, CA')"&gt;
          1405 Harrison Street, Oakland, CA
      &lt;/div&gt;
      &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This, however, causes the map to show up in the map_canvas div... What I really want is to make the map show up as a little popup, sort of like a tooltip. How can I accomplish this? Also, how can I set it up so that when the user mouses-out, the map disappears?</p>
  
  <p>I'm using html and javascript so far, and my website is in coldfusion.</p>