Google Map не отображается (не загружается)

Question

У меня нет опыта работы с API-интерфейсом google, поэтому я надеюсь, что вы можете мне помочь.

проблема возникает, когда я нажимаю кнопку «Показать», появляется ширина карты, но она не загружается, я вообще не вижу карту.

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

codepen URL для лучшего объяснения 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") 
}); 

Tha НКС

Answer 1

При загрузке карты Google в скрытый DIV, а затем отобразить этот DIV, вам нужно сказать Google перекрасить карту:

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

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