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!”? 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 <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>

<p>...and a few lines of script:</p>

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

Let's stay in touch! Share this post or subscribe for (very) occasional updates.

Hey, I'm RJ! Writer, speaker, sustainable development advocate, and inconsistent micropoet, broadcasting live from Portland.

Posted 5/14/2012
Tags
Also