CODEWITHSUNDEEP
google-maps
Nick
Nick

Reputation: 1269

Google Map div, hidden by a container div

I have a div which contains a #map div which I use to display a Google map.

The problem I'm having is that, I'm unable to interact with the map in any way, because it's being 'hidden' by the div encapsulating it.

How do I avoid this?

<div id="container">

    <!-- This div is 'on top' of the map, therefore I 
        cannot access it/invoke click events on it. -->

    <div id="map">
        <!-- This is where the map is loaded -->
    </div>

    <div id="description">

    </div>

</div>

Thanks.

Upvotes: 0

Views: 436

Answers (1)

Josh
Josh

Reputation: 1679

If you place a position:relative in the css on the map div and then bring the z-index of that div to any number higher than the z-index of the container, you should be able to interact with the map.

If you are generating the map while the div is hidden, trigger the resize event for the map using google.maps.event.trigger(map,"resize") where map is the JS variable containing the Google map object.

Upvotes: 1

Related Questions