javascript - Google マップ API が 2 回目に部分的にマップをレンダリングするのはなぜですか?

Question

マップをレンダリングするためのこの js コードがあります。

function loadMap(address)
{
    console.log(address);

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ "address": address }, function (results, status)
    {
        var pos = new google.maps.LatLng(53.681602, -1.911672); // default.
        if (status === google.maps.GeocoderStatus.OK) {
            pos = results[0].geometry.location;
        } else {
            alert("Error : Unable to locate!");
        }

        console.log(pos);

        var mapOptions = {
            center: pos,
            zoom: 10,
            zoomControl: true,
            zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP },
            mapTypeControl: false,
            panControl: false,
            scaleControl: false,
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
        var marker = new google.maps.Marker({
            map: map,
            position: pos,
            animation: google.maps.Animation.DROP
        });
    });
}

問題は、最初にマップを実行すると正常に表示されることですが、2 回目は郵便番号が同じで、緯度/経度が同じであるにもかかわらず、マップが部分的に表示され、上部に約 1/4 しか表示されないことです。 -divの左。

私が間違っていることはありますか？

編集：

jterrys の提案の後、それはまだ同じように見えます:

HTML/CSS :

#mapCanvas
{
    width: 655px;
        height: 472px;
    border: 1px solid #ccc;
}

<div id="mapCanvas"></div>

私はJQuery 2.0を使用しています.2.0未満を使用していたときもこれを持っていました.