Google地图未出现（未加载）

Question

I don't have experience with google map API, so I hope you can help me.

the problem is whenever I click on show button, the width of the map appear, but it doesn't load, I can't see the map at all.

but if i open the counsel in developer tools the map loads normally!

codepen url for better explanation https://codepen.io/ahmadz12/pen/QdRQbE

html

<div id="map-canvas" class='hide'></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<a id='show'>show</a>

css

#map-canvas{
  height: 500px;
  width: 500px;
  border: 3px solid black;
}
.hide{
  display:none;
}

javascript

if (document.getElementById('map-canvas')){

    // Coordinates to center the map
    var myLatlng = new google.maps.LatLng(52.525595,13.393085);

    // Other options for the map, pretty much selfexplanatory
    var mapOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Attach a map to the DOM Element, with the defined settings
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

}
$('#show').click(function(){
 $('#map-canvas').removeClass( "hide" )
});

Thanks

Answer 1

When you load a Google map into a hidden div and then display that div, you need to tell Google to repaint the map:

$('#show').click(function(){
    $('#map-canvas').removeClass( "hide" );
    google.maps.event.trigger(map, 'resize');
});

I suspect that Google is trying to be helpful by saving browser resources, not drawing maps in elements that can't be seen. By triggering a resize when you display your div, it causes Google to draw the map again in a now visible element.