[解決済み] google map を hidden div 内に配置する方法 (画像更新)

質問

あるページで、グーグルマップが最初は隠されたdivの中にあります。 私はリンクをクリックした後、私はdivを表示しますが、マップの左上だけが表示されます。

このコードをクリック後に実行させるようにしました。

    map0.onResize();

または

  google.maps.event.trigger(map0, 'resize')

これは、隠されたマップを含むDivを表示した後に表示される画像です。

どのように解決するのですか？

私自身がテストして、どのようにアプローチしたかを説明します。かなり簡単ですが、何か説明が必要な場合は教えてください。

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

ジャバスクリプト

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>