Googleマップは表示されません（読み込まれません）

Question

私はGoogleマップAPIの経験がありません。

問題は、表示ボタンをクリックするたびに地図の幅が表示されますが、読み込まれないため地図がまったく表示されません。

しかし、私が開発者ツールの相談役を開いた場合、マップは正常に読み込まれます！

より良い説明のため

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

ターNKS

Answer 1

あなたは隠されたdiv要素にグーグルマップをロードし、そのdiv要素を表示すると、マップを再描画するためにGoogleに指示する必要があります：

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

私はGoogleがブラウザを保存することで役に立つことしようとしていると思われます表示されない要素のマップを描画しません。 divを表示したときにサイズ変更をトリガすると、Googleは現在表示されている要素で地図を再描画します。