Skip to Content

Adding Map Tooltips to Bootstrap

Twitter’s Bootstrap is one of the best tools to crash the concept-development party in quite some time. Besides providing a great basic application stylesheet, Bootstrap comes pre-packaged with solid versions of many javascript favorites. Modals, scrollers, dropdowns, and even two flavors of tooltip—the twipsy-inspired tooltip and its hulking cousin, popover. popover is pretty good out of the box, but a little sprinkling of magic from Google Maps can help it turn a geo-focused website into a contextualizing machine.

Speaking of Twitter, why not say “Hi!”?

It goes something like this: start with a quick function for converting a list of parameters for the Google Maps Static API into a DOM-friendly <img> tag:

var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
      params = $.extend({
        center: 'New York, NY',
        size: '128x128',
        sensor: false
      }, opts),
      query = [];

  $.each(params, function(k, v) {
    query.push(k + '=' + encodeURIComponent(v));
  });

  src = query.join('&');
  return '<img src="' + src + '" />';
}

Add one part popover script, one part HTML target element, and mix well:

<!-- in body -->
<a href="#" id="example" class="btn btn-large btn-primary">Show me a map</a>

...and a few lines of script:

// in script var content = getMap({center: 'Fritz-Walter Stadion, Kaiserslautern'}); $('#example').popover({ content: content });

..and voila! Instant tooltips. Check it out in action here.

Automation

Calling popover on an element-by-element basis gets annoying pretty quickly. One easy work-around would be to identify elements that should be associated with a map with an extra class:

<p>Follow <span class="popover-map">the Yellow Brick Road</span></p>

Now, automating popover is as simple as using the text from each element to find the location of the map for each popup:

$('[class="popover-map"]').each(function () {
    var $this = $(this);
    $this.popover({ content: getMap({ center: $this.text() }) });
});

A fiddle of the final version is available here.