Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery Google Maps Tooltips in less than 100 lines of Javascript
JavaScript
tree: a920f0baed

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
README.textile
jquery.google-maps.tooltip.js

README.textile

jQuery Google Maps Tooltips

jQuery enabled tooltips for Google Maps API V3.

Usage

HTML

  
  <!-- JavaScripts -->
  <script src="/javascripts/jquery.google-maps.tooltip.js" type="text/javascript"></script>
  <script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>

  <!-- The map -->
  <div id="map"></div>

  <!-- The tooltip -->
  <div style="display:none; position: absolute;" id="map-tooltip"></div>
  

JavaScript

  
  // The Google map
  var map = new google.maps.Map(document.getElementById("map"), options);

  // Called right before tooltip is displayed
  var before_show = function(marker, tooltip) {
      // Set tooltip contents to the marker's title
      // NOTE you could also attach JSON data to a marker and create more complex tooltips
      tooltip.html(marker.title);
      // NOTE you can also change the marker's icon
      marker.setIcon('/images/hover.png');
  };
  // Called right before tooltip is hidden
  var before_hide = function(marker, tooltip) {
    marker.setIcon('/images/normal.png');
  };

  // Attach tooltip to the DIV element
  var tooltip = new MapTooltip(map, $('#map-tooltip'), before_show, before_hide);

  // Attach tooltip to marker, see http://code.google.com/intl/sv-SE/apis/maps/documentation/v3/reference.html#Marker
  tooltip.addMarker(marker); // 
  

CSS

  
  #map-tooltip { width: 200px; height: 100px; color: white; padding: 20px; }
  // Now let's add some CSS3 styles
  // Rounded corners
  #map-tooltip, .button { -moz-border-radius:5px; -webkit-border-radius:5px; }
  // Drop shadow
  #map-tooltip { box-shadow:rgba(0,0,0,0.9) 0 0 10px; -webkit-box-shadow:rgba(0,0,0,0.9) 0 0 10px; -moz-box-shadow:rgba(0,0,0,0.9) 0 0 10px; }
  // Transparent background
  #map-tooltip { background: rgba(10, 10, 10, 0.6); }
  

That’s all folks.

References

Author

Christian Hellsten (Aktagon Ltd.)

Something went wrong with that request. Please try again.