为什么我的谷歌地图中的地图不与其容器对齐?

Why doesn't the map in my Google map line up with it's container

本文关键字:对齐 谷歌地图 我的 地图 为什么      更新时间:2023-09-26

我已经添加了一个地图到我的一个页面,但内容不与容器对齐,我尝试了相同的地图在一个独立的页面,它工作得很好。

地图呈现如下:在这里输入链接描述

地图实际上是在伦敦的中心,所以它看起来像和耻辱的问题,但我还没有能够解决它。下面是创建映射的函数:

function loadMap(){
    geocoder = new google.maps.Geocoder();
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        thisLocation = results[0].geometry.location;
        console.log("location = " + thisLocation);
        var tagem = new google.maps.LatLng(thisLocation);
        var mapProp = {
            center:new google.maps.LatLng(51.51121389999999, -0.11982439999997041),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        marker = new google.maps.Marker({position:tagem,animation:google.maps.Animation.BOUNCE});
        marker.setMap(map);
    }else{
        console.log('Geocode was not successful for the following reason: ' + status);
    }
    });
}

看起来你只需要告诉地图调整大小。将此添加到loadMap()函数的末尾:

google.maps.event.trigger(map, "resize");