Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 0e066b483e
Fetching contributors…

Cannot retrieve contributors at this time

104 lines (77 sloc) 2.979 kb

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

First you’ll need to setup your Google map:

  
  // Map options
  var latlng = new google.maps.LatLng(60.215084, 24.972961);
  var options = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL} // ZOOM_PAN
  }

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

  // Invisible code that adds markers
  ...
  

With the map setup you’re ready to attach the tooltip to the markers and to define callbacks that define what happens when the tooltip is shown:

  
  // Called right before tooltip is displayed
  var before_show = function(marker, tooltip) {
      // Set tooltip contents to the marker's title
      tooltip.html(marker.title);

      // NOTE you could also attach JSON objects to a marker and 
      // create more complex tooltips that save the world from evil politicians
      tooltip.children('.thumbnail').attr('src', marker.product.thumbnail_url);

      // 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); // markers are usually loaded from a database
  

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.)

Jump to Line
Something went wrong with that request. Please try again.