2

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

Community
  • 1
  • 1
JNF
  • 3,696
  • 3
  • 31
  • 64

1 Answers1

5

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.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • I would never have figured it out. You should edit to emphasize a *specific* height is needed, rather than the percentage I had there. – JNF Nov 25 '12 at 17:21
  • Can you also explain why it worked when #map_canvas had text and was not initialized to a map - even with the same CSS? – JNF Nov 26 '12 at 08:31
  • 1
    @JNF If you look at the source once the google map is initialized you will notice that the map is composed of a long line of elements positioned absolutely within a container, this is where the problem begins, since the bootstrap collapse plugin requires a content height in order to expand the content once collapsed. Since it was not designed to get dimensions from elements positioned absolutely, you have to define that on the container itself by hand. With text, the plugin can easily discern dimensions as it was designed to do. – Andres I Perez Nov 26 '12 at 11:57