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>
<p>Wi nøt trei a høliday in <span class="popover-map">Sweden</span> this yer?</p>

CSS

body > p {
    position: absolute; 
    top: 100px;
}
span {
    font-weight:bold;                
}

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

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

})(jQuery);