У меня была похожая проблема, и я решил ее, изменив стиль CSS в div с помощью jquery, и изменив место, куда я поместил iframe карты Google.
Проблема
Код jquery:
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
HTML: у меня была ссылка и iframe карты Google, встроенные в div с отображением: нет стиль CSS.Поскольку отображение: ни один стиль не делает ширину div: 0 и высоту: 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 с display: none надисплей: блок, так что карта хорошо показывает.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
Надеюсь, это поможет!Хорошего дня кодирования!