Geek asks and answers

How to use twitter bootstrap popover for dynamic content

I want to show google map on popover

But popover can't change map

It works only with a fixed card.

My code is:

$(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 a click on the link (.map), because #map is changed, popover is broken and does not work

thank

+5
source share
1 answer

I don’t think you need to do this in two different steps (click on it), and you don’t need a div if there is no reason for what you did not mention. This works for me:

JavaScript:

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

Then you can remove the line center: 'New York, NY',from the getMap options.

HTML:

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

If you used the #map div to make the popover bigger, just change the CSS popover by doing something like:

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

, popovers .

+17

More articles:


All Articles