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

У меня есть веб-страница, содержащая скрытый

с помощью display: none;, и у меня есть кнопка на странице, которая при нажатии изменит видимость
и наложит ее поверх всего остального (потому что он имеет набор z-индексов).

Внутри этого

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

Проблема

Поскольку iFrame Google Maps загружается при загрузке страницы, а при скрытии

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

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

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

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

Этот iframe имеет страницу Карт Google в качестве своего src. то есть URL, а не ссылку на файл на моем сайте.

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

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

15 ответов

У меня была эта аналогичная проблема, и я решил ее, изменив стиль css для div через jquery и изменив место, где я разместил iframe карты google.

Проблема

Код jquery:

HTML: У меня была ссылка и карта google iframe, загруженная inline в div с дисплеем: none css style. Поскольку для отображения: none стиль делает ширину div: 0 и height: 0, адрес, запрошенный на карте google, не отображается должным образом.

<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>

Решение

Код jquery

HTML: div, в котором я раньше клал карту, пуст, потому что я загружаю карту только при нажатии на ссылку, и в этот момент я изменяю стиль css с дисплея: none для отображения: block, поэтому карта хорошо показывает.

<a id="map_link" href="#">See map.</a>

Надеюсь, это поможет! Хороший день кодирования!


Я не использую iframe (я использую версию 3 API Карт Google), но у меня была такая же проблема "не выровнена правильно" из-за "скрытого" div. Мое исправление, а не использование display: none, которое полностью удалило его из DOM, я использовал видимость и высоту:

.myMapDiv {
 visibility: hidden;
 height: 0px;
}

Я считаю, что происходит потому, что "видимость: скрытая" на самом деле сохраняет элемент в DOM по-прежнему, карта может отображать по назначению. Я тестировал его в FF/Chrome/IE 7-9 и, кажется, работает до сих пор без проблем.


Я не pro, но я удалил onload = "initialize()" из тега body и изменил его на onclick = "initialize()" в кнопке, которая отображает div. Сейчас это работает.


После нескольких часов поиска в Интернете и получения результатов я решил попробовать то, что я вложил в качестве моей последней заметки на мой вопрос, и это сработало!

Я просто сделал второй файл с именем map.html и внутри кода был буквально:

<iframe> </iframe>

с явно источником Google Maps, а затем на моей главной странице у меня был src для iframe, связанного с pages/map.html, а не с ссылкой в ​​Google Map.


Вы можете просто обновить iframe следующим образом:

var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');


У меня была та же проблема, мое решение заключалось в том, чтобы установить div и iframe на высоту 0px, а затем изменить ее на желаемую высоту при переключении.


<a href="#mapa" onclick="showMap();">Show / Hide Map</a>


вместо того, чтобы скрыть div с помощью display:none, используйте что-то вроде position: absolute; top: -9999px; left: -9999px

тогда, когда вы хотите показать контент для этого div, установите эти свойства в position: static; top: auto; left: auto или что-то вроде этого


Существует решение, использующее как css, так и jQuery. Сначала вам понадобится обертка div без высоты, которая будет включать iframe.

Таким образом, iframe будет нормально загружаться, не будучи видимым вообще. Затем, используя jQuery, вы можете отображать/скрывать iframe.

HTML

<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>
<div id="map-wrapper" style="height:0; overflow:hidden;">
 <div id="gmap">
 
 </div>
</div>

CSS

.hidden {
 display: none;
}

JQuery

$(document).ready(function() {
$('#map-show').on('click',function(){
 // Remove class hidden from map - Display map
 $('#gmap').removeClass('hidden');
 // Set height to map container div - ONLY one time needed
 $('#map-wrapper').css('height', 'auto');
});
$('#map-hide').on('click',function(){
 // Add class hidden to map - Hide map
 $('#gmap').addClass('hidden');
});

});


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

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

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


Я обнаружил ту же проблему.

Решение

Использование iframe в качестве внешнего источника работает.

онлайн-демонстрация

http://jsbin.com/nogomi/1

Убедитесь, что атрибут iframe element name совпадает с атрибутом a element target

Вдохновленный https://developers.google.com/maps/documentation/javascript/


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

css hidden оставить пробел в потоке 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>
</code>

JavaScript:

<code>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();
 });
})
</code>


Я тоже борюсь с чем-то подобным. Когда я изначально добавляю класс .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?


Вы можете использовать скрытую видимость и использовать jQuery для отображения и скрытия.

$('click-button').click(function(){
 var visibility = $("hidden-div").css("visibility");
 if (visibility == "hidden")
 $("hidden-div").css("visibility","visible");
 else
 $("hidden-div").css("visibility","hidden");
 });


в CSS:

#googleMap { visibility: hidden; }

Оригинал

beim Klick der die Karte öffnen soll jQuery:

ИЗМЕНИТЬ

jQuery, когда вы нажимаете, чтобы открыть карту:

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

licensed under cc by-sa 3.0 with attribution.