Bootstrap Popover w/ Map

Use the Google Maps Static API and Twitter Bootstraps to quickly add map tooltips to any location-aware datum. http://blog.rjzaworski.com/?p=993

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<a href="#" id="example" class="btn btn-large btn-primary">Show me a map</a>

CSS

#example {
    position: absolute; 
    top: 100px; 
    left: 100px;
}

.popover-inner { width:auto; }
.popover-title { display:none; }
.popover-content { padding:0; }

JavaScript

(function ($) {

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 + '" />';
};

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

})(jQuery);