CODEWITHSUNDEEP
jquerycsstwitter-bootstrapgoogle-mapscarousel
Alex
Alex

Reputation: 97

Google map as background in Bootstrap carousel not displaying entirely

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

Answers (1)

anpsmn
anpsmn

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");
    }
 });

Demo

Upvotes: 2

Related Questions