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

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

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

Проблема

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

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

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

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

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

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

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

Ответы

Ответ 1

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

Проблема

Код jquery:

<script type="text/javascript">    
$(function(){  
        $("#map_link").click(function(event) {  
            event.preventDefault();  
            $("#map").slideToggle();
        });  
    });
</script>

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

<script type="text/javascript"> 
$(function() {
    $("#map_link").click(function(event) {  
        event.preventDefault();
        $("#map").slideToggle(); 
        $("#map").html('google_map_iframe_here').css('display','block');
        });  
});
</script>

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

<html>
<iframe> </iframe>   
</html>

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var ifr = document.getElementById("iframe");
    var text = document.getElementById("displayText");
    if(ele.style.visibility == "visible") {
            ele.style.visibility = "hidden";
        ele.style.height = "0px";
        ifr.style.height = "0px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
    else {
        ele.style.visibility = "visible";
        ele.style.height = "420px";
        ifr.style.height = "420px";
        text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
    }
} 
</script>

<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>


<div id="toggleText"  style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>

Ответ 8

<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
<a href="#mapa" onClick="showMap();">Show / Hide Map</a>
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>

Ответ 9

Существует решение, использующее как 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">
        <iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
    </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');

});

});

Ответ 10

Вы можете использовать скрытую видимость и использовать 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");
  });

Ответ 11

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

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

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

Ответ 12

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

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>

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

Ответ 13

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

Ответ 14

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

Решение

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

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

http://jsbin.com/nogomi/1

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

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

Ответ 15

в CSS:

#googleMap { visibility: hidden; }

Оригинал

beim Klick der die Karte öffnen soll jQuery:

ИЗМЕНИТЬ

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

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