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
tree: 24793eeb38

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); // 
  

That’s all folks.

References

Author

Christian Hellsten (Aktagon Ltd.)

Something went wrong with that request. Please try again.