Reputation: 97
I try to add a map as item in Bootstap carousel,in the same way as in this topic Google map with bootstrap 3 carousel bug? ,when the map is on the first item(active),the map is displayed correctly,but when the map is placed on the second position(2nd item,3rd....),the map is not displayed entirely.
here is the demo to explain what's going wrong: http://www.bootply.com/9nAZmtYLOM# And here the demo of what's going right: http://www.bootply.com/YcaTxtftSW
Thanks for your help!!!
Upvotes: 0
Views: 664
Reputation: 7257
Since the .item
is hidden when map is set you will have to resize the map when the section becomes visible
You can call the resize event after slide
$('#myCarousel').on('slid.bs.carousel', function (e) {
if($('.item.active').find("#map-canvas").length == 1) {
google.maps.event.trigger(map, "resize");
}
});
Upvotes: 2