错误的谷歌地图api位置在我的HTML页面上

Question

当我想将地图置于我的网站中心时，我遇到了问题。 这是我的JS：

function initMap() {
var myLatLng = new google.maps.LatLng(-25.363, 131.044);

var map = new google.maps.Map(document.getElementById('map'), {
    center: myLatLng,
    zoom: 5
});

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
    });
}

这是我的HTML：

<div id="popup_map">
    <div class="map-container">
        <div id="map" class="g-map"></div>
    </div>
</div>

这是我的CSS：

#popup_map {
         width: 100%;
         height: 100%;
         background: rgba(0,0,0,0.7);
         position: fixed;
         top: 0;
         left: 0;
         z-index: 1050;
         display: none;
     }

    .map-container {
        width: 98%;
        height: 90%;
        background: white;
        margin: 2% auto;
    }

    .g-map {
        height: 100%;
        position: relative;
        overflow: hidden;
    }

标记位于好位置，但地图没有很好地居中。 地图的中心应该在标记上，而是在红点上......

编辑：JsFiddle

上没有问题

edit2：并显示地图我刚添加了一个简单的链接，这里是我使用的JS：

$("a#show_map").click(function () {
        $("#popup_map").fadeIn();
    });

这正是我添加它以使其工作的地方：

google.maps.event.trigger(map, 'resize');
map.panTo(new google.maps.LatLng(-25.363, 131.044));

Answer 1

调整地图大小

google.maps.event.trigger（地图，＆＃39;调整大小＆＃39;）;

如果需要，您还必须重新设置地图中心。因为你必须这样做

var reCenter = new google.maps.LatLng（lat，lng）; map.setCenter（reCenter）;