google map in bootstrap popover - andrew pougher

google map in bootstrap popover

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.js"></script>
<p>I am in <span class="popover-map">Manhattan</span>  now? I will be back in <span class="popover-map">Manhattan</span> at 5pm.</p>

CSS

body {padding:30px
}
span {
    font-weight:bold;    margin-bottom:4px;            
}

.popover-inner { min-width:420px; }
.popover-title { display:none; }
.popover-content { padding:0; width: 100%; }

JavaScript

(function ($) {

var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?&zoom=14&markers=size:small|color:blue|Central Park, Manhattan, NY",
      params = $.extend({
        center: 'Central Park, Manhattan, NY',
        size: '400x400',
        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({ html:true,
                  placement: 'bottom',
                   content: getMap({ center: $this.text() }) });
});

})(jQuery);