Карта Google в скрытом разделе

Question

Я использую один из этих свертываемых элементов div, чтобы скрыть карту Google на моей веб-странице.Но когда я запускаю событие, чтобы развернуть div и показать карту Google, оно не появляется.И эта проблема только с IE, все остальные браузеры работают просто отлично.Я нашел этот же вопрос, заданный в ответе, чтобы добавить этот код:

google.maps.event.trigger (map, 'resize');

Но где я должен его разместить?Я поместил в функцию Javascript, которая вызывается, когда div падает, но это не работает.Я должен заменить "карту" названием моей карты?Я получил код карты Google в виде тега "iframe" с сайта Google и просто вставил его в свою веб-страницу ... Пожалуйста, объясните.

Answer 1

google.maps.event.trigger(map, 'resize');

- для использования API Карт.Тем самым карта является ссылкой на ваш объект карты.

Но вы не используете API.Вы используете iframe из Google Maps.

Google Maps не нравится находиться в скрытом div.Решение, которое я верю, состоит в том, чтобы заставить iframe сказать 1x1 px.Затем измените размер div, чтобы сделать его достаточно большим - и видимым.

Альтернатива - дать iframe src = "about: blank".и затем после того, как вы покажете div, динамически установите src на правильный URL.Таким образом, карта загружается в тот момент, когда div виден.(это, вероятно, лучше, так как вы не заставляете пользователя загружать содержимое iframe, даже если они не открывают карту)

Answer 2

Поскольку в своем вопросе вы говорите, что не используете API Карт Google, вы можете сделать следующее:

Свернуть карту:

<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>

Использовать этот код (версия jQuery), когдакарта отображается:

$('#map-wrapper').html( $('#map-wrapper').html() );

Версия Javascript:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

Когда отображается карта, содержимое оболочки (iframe карты Google) будет восстановлено, поэтому перезагружено.