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
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.
Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With