how to use twitter bootstrap popover for dynamic content

Question

I want to show google map on popover

But the popover fails to change map

Only works when the map is fixed

My code :

$(function(){

// getmap function from http://stackoverflow.com/questions/10545768/google-map-in-twitter-bootstrap-popver
var getMap = function(opts) {
  var src = "http://maps.googleapis.com/maps/api/staticmap?",
  params = $.extend({
    center: 'New York, NY',
    zoom: 14,
    size: '512x512',
    maptype: 'roadmap',
    sensor: false
  }, opts),
  query = [];

  $.each(params, function(k, v) {
query.push(k + '=' + encodeURIComponent(v));
  });

  src += query.join('&');
  return '<img src="' + src + '" />';
}



$('.map').click(function(){
    location = $(this).text();
    $("#map").html(getMap({center: location}));
    });


$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
    return $("#map").html();
    }});    

    });

My problem with this function :

$('.map').click(function(){...});

With Click on the link(.map) because the #map is changed, the popover is broken and does not work

Thank you

Answer 1

I don't think you need to do it in two separate steps (click then popover), nor do you need the div unless there's some reason for that which you haven't mentioned. This works for me:

JavaScript:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
     return getMap({center: $(this).text()})
  }});    
});

You can then remove the center: 'New York, NY', line from your getMap params.

HTML:

<a href="#" class="map">New York, NY</a>

If you were using the #map div to make the popover larger, just change the CSS of the popover instead, by doing something like:

.popover { width: 512px; height: 512px; }

I would recommend using a more specific selector for that though, otherwise it will affect popovers elsewhere on your site.