我的 html 页面上的 google 映射 api 位置错误

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：为了显示地图，我刚刚添加了一个简单的 link，这是我使用的 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(地图,'resize');

如果需要，您还必须重新居中地图。为此你必须做

var reCenter = new google.maps.LatLng(lat, lng); map.setCenter(重新居中);

我的 html 页面上的 google 映射 api 位置错误

Wrong google maps api position on my html page

html

javascript

css

google-maps

google-maps-markers