Adding Map Tooltips to Bootstrap

  • 5/14/2012

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.

![](http://blog.rjzaworski.com/wp-content/uploads/2012/05/bootstrap-map.png "Bootstrap and Google Maps")
Speaking of Twitter, why not say “Hi!”? [Follow @rjzaworski](https://twitter.com/rjzaworski)
It goes something like this: start with a quick function for converting a list of parameters for the [Google Maps Static API](https://developers.google.com/maps/documentation/staticmaps/) into a DOM-friendly `` 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`](http://twitter.github.com/bootstrap/javascript.html#popovers), one part HTML target element, and mix well:

Show me a map

...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](http://jsfiddle.net/rjzaworski/jHfy5/).