Встроенные Google Карты не отображаются должным образом

Есть ли у кого-нибудь идеи, как это должно быть исправлено? Я изучаю, но ничего не нашелВстроенные Google Карты не отображаются должным образом

JSFIDDLE!

<body> 
<div id="flip"><img src="locate.png"/></div> 
<div id="panel"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47018.92091473647!2d12.628083100000003!3d42.56203300000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132efb44daf819f3%3A0x6be10bf1daf18dc2!2sTerni+TR%2C+Italy!5e0!3m2!1sen!2s!4v1415383956896" width="600" height="350" frameborder="0" style="border:0"></iframe></div> 
</body>

CSS:

#panel,#flip 
{ 
background-color:#e5eecc; 
border:solid 1px #c3c3c3; 
} 
#panel 
{ 
margin: auto; 
width:100%; 
height:350px; 
display:none; 
}

JQuery

$(document).ready(function(){ 
$("#flip").click(function(){ 
$("#panel").slideToggle("slow"); 
google.maps.event.trigger(map, "resize"); 
}); 
});

источник

2014-11-07 Granit

дисплей: никто не заставит карту размера неправильно в самом начале. Если вы заметили, что карта действительно загрузилась с Терни правильно, просто не центрирована и не масштабируется на нужном уровне.

Вот быстрый предложил обходной путь - не делать сразу не отображается ни при нагрузке, скрыть панель, когда документ будет готов

$(document).ready(function(){ 
    $("#panel").hide(); 
    $("#flip").click(function(){ 
    $("#panel").slideToggle("slow"); 
    google.maps.event.trigger(map, "resize"); 
    }); 
});

http://jsfiddle.net/n6Lfau0w/3/

Update: Панель должна быть инициализирована по-разному на jsfiddle , Я полностью спрятал вызов скрыть, и вместо этого использовал стиль видимости.

Заголовок

<style> 
    #panel,#flip 
    { 
     background-color:#e5eecc; 
     border:solid 1px #c3c3c3; 
    } 
    #panel 
    { 
     margin: auto; 
     width:100%; 
     height:350px; 
     /* display:none; */ 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#flip").click(function(){ 
     if($("#panel").css("visibility") !== "") $("#panel").css("visibility",""); 
     $("#panel").slideToggle("slow"); 
     // google.maps.event.trigger(map, "resize"); 
     }); 

     $("#panel").css("visibility","hidden"); 
     $("#panel").slideToggle("slow"); 
    }); 
</script>

тела

<div id="flip"><img src="locate.png"/></div> 
<div id="panel"> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d47018.92091473647!2d12.628083100000003!3d42.56203300000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132efb44daf819f3%3A0x6be10bf1daf18dc2!2sTerni+TR%2C+Italy!5e0!3m2!1sen!2s!4v1415383956896" width="600" height="350" frameborder="0" style="border:0"></iframe> 
</div>

источник

2014-11-07 20:02:39 K2so

Спасибо за ваш ответ. Когда я нажимаю на значок, чтобы открыть карту, как только я открою страницу, она будет работать. но если я жду, как 5 секунд, это по какой-то причине не удается. Есть идеи? – Granit

Все еще работает для меня. Вы имеете в виду полный код приложения или код jsfiddle? – K2so

Также советуем проверять консоль, чтобы увидеть, есть ли какие-либо другие ошибки, загружающие другие элементы в ваш код (F12, если вы отлаживаете в Chrome) – K2so

Встроенные Google Карты не отображаются должным образом

ответ

Смежные вопросы