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

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

Решение

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

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

http://jsbin.com/nogomi/1

Убедитесь, что атрибут name элемента iframe совпадает с [[]] 113] атрибут 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>

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

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

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

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

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

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

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

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

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