Карты Google не центрируются, так как отображается div: нет при загрузке страницы

Question

У меня есть веб-страница, которая содержит скрытый <div> с использованием display: none;, и у меня есть кнопка на странице, которая при нажатии изменит видимость <div> и наложит ее поверх всего остального(потому что у него установлен z-index).

В этом <div> у меня есть встроенная карта Google, в которой используется iFrame с добавленной булавкой Google Map в месте, которое я пытаюсь показать своим пользователям.

Проблема

Поскольку iFrame Google Maps загружается при загрузке страницы, а <div> скрыто, это означает, что при отображении <div> карта Google не выравниваетсяправильно (булавка и центральное расположение теперь находятся в верхнем левом углу)

Решение, которое я ищу

Я знаю, что некоторые люди, вероятно, расскажут мне способы, которыми я "должен "перекодировать всю мою страницу.То, что я на самом деле ищу, это какая-то функция onClick, которую я могу установить, которая будет перезагружать iFrame так, чтобы карта была правильно отцентрирована.

Что нужно знать

Этот iframe имеет GoogleСтраница карты как ее источник.т.е. URL, а не ссылка на файл на моем сайте.

Любая помощь будет принята с благодарностью!Большая часть кода, который я просматривал при поиске в сети, похоже, работает над обновлением определенного файла, на который ссылается, а не внешнего URL.

Будет ли это работать, если я встроу карту в другой файл HTML, а затем поместу этот файл HTML в качестве источника фрейма?

Answer 1

Я тоже боролся с чем-то подобным. Где я изначально добавляю класс .hidden, который display: none;. Но когда я переключаю .hidden, карта не центрируется. Я обнаружил, что ожидание до полной загрузки карты с помощью прослушивателя событий idle перед добавлением класса .hidden решило все мои проблемы с отображением.

google.maps.event.addListenerOnce(map, 'idle', function(){ // do something only the first time the map is loaded $mapContainer.addClass('hidden'); });

ссылка: Как проверить, полностью ли загружены Карты Google?

Answer 2

Та же проблема, простое решение.

css скрыто, оставьте пробел в html потоке.Я не знаю, является ли позиция CSS за пределами экрана приемлемой для каждого устройства, и получается ли блок полностью скрытым.JQuery хорошо работает с шириной и высотой блока.

css:

#map    {overflow:hidden; float:left;}

html:

<a href="#" id="btn_show">show</a>
<a href="#" id="btn_hide">hide</a>
<div id="map">
  <iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>

javascript:

var w=sames as gmap width;
var h=sames as gmap height;

$(document).ready(function(){
  $("#map").width(0);
  $("#map").height(0);

  $("#btn_show").click(function(){
    $("#map").show();
    $("#map").width(w);
    $("#map").height(h);
  });
  $("#btn_hide").click(function(){
    $("#map").hide();
  });
})

Answer 3

в CSS:

#googleMap { visibility: hidden; }

Оригинал

beim Klick der die Karte öffnen soll jQuery:

EDIT

jQuery при нажатии, чтобы открыть карту:

$('#googleMap')
 .css('display','none')
 .css('visibility','visible')
 .fadeIn(500);
});

Answer 4

Вот решение, которое вообще не требует программирования!

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

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

Answer 5

Вы можете использовать видимость скрытый и использовать jQuery, чтобы показать и скрыть его.