Карты на div не отображаются должным образом при отображении через функцию Click, используя JavaScript

0

У меня есть привязанный тег, который при нажатии будет отображать div, содержащий карту.

Но он не отображается должным образом. Пожалуйста, проверьте ниже скрипту. Неверное отображение-jsFiddle

тогда как если я покажу его при загрузке, установив display:block будет отображаться правильно, как показано в приведенном ниже скрипте.

Правильный Display-jsFiddle

Почему он не отображается, когда он скрыт, а затем появляется.

Вот полный код

<html>
<head>
<title>Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">                  </script>
<script type="text/javascript">
$(document).ready(function () 
{
    $('#click').click(function(e){
     e.preventDefault();
    //$("#Maps").show();
    $("#Maps").css("display","block");
   })
});

</script>
</head>
<body>
<a href="#" id="click">Click Me</a>
<div id="Maps" runat="server" style="display:none;width: 100% !important; position:     fixed; z-index: 100000; margin-left: -10px; height: 100% !important; background-image: url('Images/Backgrounds/bgtrans.png')">

<div id="mapsdiv" runat="server">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15530.128122214286!2d74.76403990607938!3d13.317147169095287!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5a9e6eb499516618!2sSri+Mahalingeshwara+Temple%2C+Marpalli!5e0!3m2!1sen!2sin!4v1399292987193" width="800" height="600" frameborder="0" style="border:0"></iframe>
</div>
</div>

  • 0
    Это потому, что скрипт карты устанавливает свои свойства в зависимости от размера соответствующего элемента контейнера.
Теги:
google-maps

4 ответа

1
Лучший ответ

Всякий раз, когда вы меняете состояние отображения контейнера Google Map, вам необходимо перерисовать карту. Поскольку вы используете встроенный iframe, у вас нет доступа к карте google.maps.event.trigger(map, 'resize'); мероприятие.

В качестве обходного пути вы можете просто установить iframe src себе после отображения карты:

$('#click').click(function(){
    var $map = $('#Maps');

    $map.show();
    $map.find('iframe').attr('src', $map.find('iframe').attr('src'));
});

DEMO

Поделиться
  • 0
    Большое спасибо, приятель. Работает хорошо. :)
1

Вы можете просто установить класс для размещения элемента вне видового экрана. Это позволит избежать лишней бесполезной перезагрузки:

DEMO

HTML:

<div id="Maps" class="outsideViewport">...</div>

CSS:

#Maps.outsideViewport{
    top: -99999px;
    left: -99999px;
}

Затем:

$('#click').click(function () {
    $("#Maps").removeClass('outsideViewport');
});
Поделиться
1

Почему вы не пытаетесь сделать следующее:

HTML

<a href="#" id="click">Click Me</a>
<div id="Maps" style="">

<div id="mapsdiv">
        </div>      
    </div>

JS

$('#click').click(function(){
    $("#mapsdiv").html('<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15530.128122214286!2d74.76403990607938!3d13.317147169095287!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x5a9e6eb499516618!2sSri+Mahalingeshwara+Temple%2C+Marpalli!5e0!3m2!1sen!2sin!4v1399292987193" width="800" height="600" frameborder="0" style="border:0"></iframe>');
   $("#Maps").show();
    $("#Maps").css("display","block");
   });

CSS

 #Maps{
        display:none;
        width: 100% !important; 
        position: fixed; 
        z-index: 100000; 
        margin-left: -10px; 
        height: 100% !important; 
    }

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

FIDDLE

http://jsfiddle.net/QNVg8/

Поделиться
  • 0
    Большое спасибо за ответ .. Хорошая идея для реализации ..
1

Не пытайтесь усложнить задачу, которую вам просто не нужно использовать блочный тип из вашей карты:

В #Maps используйте <span>, а в jQuery вместо show() используйте css("visibility", "visible");

ДЕМО ЗДЕСЬ!

Поделиться
  • 1
    Не работает на хроме. Даже видимость, скрытая в iframe, не скрывает этого. Кстати, не уверен, почему OP должен использовать элемент inline-block в качестве span для содержания iframe ?!
  • 0
    У меня на Chrome работает версия 35.0.1916.86 бета-м
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню