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.

![]( "Bootstrap and Google Maps")
Speaking of Twitter, why not say “Hi!”? [Follow @rjzaworski](
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 `` tag:
var getMap = function(opts) {
  var src = "",
      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:

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.


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](