javascript - Google map with bootstrap 3 carousel bug?

Question

I am trying to add a google map as an item in a bootstrap carousel. For some reason when I include a map inside a carousel the tiles of the map load in wrong. If you're lucky it loads in correctly to start for a seconds but then it appears to stream in a set of tiles at different zoom levels.

If you move the same logic outside of a carousel it displays fine.

I've tried to simplify a sample page down using bootply below to demonstrate the issue as I find it difficult to explain. http://www.bootply.com/YcaTxtftSW

can anyone offer a suggestion as to what I'm missing please?

Answer 1

It's forced by CSS, the setting min-height: 400px; for .carousel img will also affect the images used for the map(especially the tiles, which have a natural size of 256x256)

Add this CSS:

#map-canvas img {
  min-height: 0;
}