CODEWITHSUNDEEP
jquerygoogle-maps
Granit
Granit

Reputation: 127

Embedded Google Maps not showing properly

Does anyone have an idea how this should be fixed? I've been goggling about it but couldn't find anything

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

Upvotes: 0

Views: 916

Answers (1)

K2so
K2so

Reputation: 982

display:none will cause the map sized improperly in the beginning. If you notice the map did load with Terni correctly, just not centered and zoomed at the right level.

Here's a quick proposed workaround - do not display none at load, hide the panel immediately when document is ready

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

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

Update: The panel must be initialized differently on jsfiddle. I ditched the hide call completely, and manipulated the visibility style instead.

Header

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

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>

Upvotes: 1

Related Questions