CODEWITHSUNDEEP
javascriptgoogle-maps-api-3twitter-bootstrap
JNF
JNF

Reputation: 3730

Google maps interferring with Twitter Bootstrap

I have a page on which I use bootstrap and I added a map (API v3).

It works fine at first, but when I collapse the map - I can't reopen it.

I've looked through similar SO questions, but couldn't find one addressing this.

My HTML:

<div id="mapHeader" data-toggle="collapse" data-target="#map">
    Header
</div>
<div id="map" class="collapse in">
    <div id="map_canvas"></div>
</div>

CSS:

#map_canvas { height: 100% }
#map {height: 30em; width: 50%;max-height:100%;}

Javascript only loads the map.

A fiddle to demonstrate

Seems related, but I couldn't implement the same solution

Upvotes: 2

Views: 1408

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75409

The problem is that the bootstrap collapse plugin is not registering a dimension for your map canvas so it doesn't know what height to expand it to. To fix this, add some dimensions to your #map_canvas like so:

#map_canvas { height: 30em; width: 100%; }

Edit: As OP commented below, an specific height is required on the #map_canvas container to allow the proper expansion of the collapsible container.

Upvotes: 5

Related Questions