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

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

27 голосов
/ 29 марта 2011

У меня есть веб-страница, которая содержит скрытый <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 в качестве источника фрейма?

Ответы [ 15 ]

16 голосов
/ 17 мая 2011

У меня была похожая проблема, и я решил ее, изменив стиль 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 с отображением: none css style. Поскольку отображение: ни один стиль не делает ширину 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 на display: block, так карта показывает хорошо. 

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

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

7 голосов
/ 13 февраля 2012

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

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

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

7 голосов
/ 28 апреля 2011

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

2 голосов
/ 15 июля 2014

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

var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
2 голосов
/ 29 марта 2011

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

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

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

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

1 голос
/ 28 марта 2014

Существует решение, использующее как 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');

});

});

1 голос
/ 18 апреля 2012 
<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>
1 голос
/ 05 апреля 2012

У меня была та же проблема, мое решение состояло в том, чтобы установить div и 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>
1 голос
/ 02 февраля 2012

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

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

0 голосов
/ 24 февраля 2016

У меня такая же проблема.

Решение

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

онлайн демо

http://jsbin.com/nogomi/1

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

По мотивам https://developers.google.com/maps/documentation/javascript/

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...