Div карты Google, скрытый контейнером div

Question

У меня есть div, который содержит div #map, который я использую для отображения карты Google.

Проблема, с которой я столкнулся, заключается в том, что я не могу взаимодействовать с картой каким-либо образом, потому что она «скрыта» дивом, инкапсулирующим ее.

Как мне избежать этого?

<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>

Спасибо.

Answer 1

Если вы поместите position:relative в css на карте div, а затем установите z-index этого div на любое число, большее z-index контейнера, вы сможете взаимодействовать с картой.

Если вы генерируете карту, когда div скрыт, запустите событие изменения размера карты, используя google.maps.event.trigger(map,"resize"), где map - это переменная JS, содержащая объект карты Google.