Javascript 谷歌地图只显示半屏幕？

谷歌地图只显示屏幕的一半。我用resize尝试了修复：

google.maps.event.trigger（map，“resize”）但是没有任何运气

有人能帮忙吗

加载时，它仅显示屏幕的一半，如您在此处所见：


我找了又找，没有找到任何解决办法

$(function () {
    var geocoder = new google.maps.Geocoder();
    var locations = [{
        location: "Brogade Odense Danmark",
        image: "brodate.png",
        text: "This is nice",
        reward: 20
    }, {
        location: "Christiansgade, Odense, Danmark",
        image: "kochsgrade.png",
        text: "Uber nice",
        reward: 100
    }, {
        location: "Overgade Odense Danmark",
        image: "overgrade.png",
        text: "smooooth :)",
        reward: 2000
    }];
    var cc = "";
    var markers = [];
    var infowindow = new google.maps.InfoWindow();
    var map;
    var userPosition = new google.maps.LatLng(55.4000, 10.3833);
    var defaultLocation = "Brogade Odense Danmark";

    //Reset all marker to defeault except the one whose id = id
    function resetMarker(id) {
        for (var i = 0; i < locations.length; i++) {
            if (markers[i].id !== id) {
                //reset marker to default
                markers[i].setIcon(locations.image);
            } else {
                markers[i].setIcon(locations.image);
            }
        }
    }


    function get_user_position() {

        geocoder.geocode({
            address: defaultLocation
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latLng = results[0].geometry.location;

                map.setCenter(latLng);


                for (var i = 0; i < locations.length; i++) {
                    addLocation(locations[i], i);
                }






            }




        });


    }


    function addLocation(location, i) {
        geocoder.geocode({
            address: location.location
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //Get position of addres
                latLng = results[0].geometry.location;
                //create new marker
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    id: i
                });
                //add marker to the array
                markers[i] = marker;

                //call back event click
                google.maps.event.addListener(marker, "click", function () {
                    resetMarker(i);
                    infowindow.setContent("<table><tr><td><img src=\'" + location.image + "\' height=50 width=50></td><td width=\'10\'></td><td><small>" + location.text + "</small><br><strong>$" + location.reward + " reward</strong><br /><a href=\'#\' class=\'btn btn-small btn-success\'>View listing</a></td></tr></table>");
                    infowindow.open(map, marker);
                    marker.setIcon(location.image);
                });





            }
        });
    }

    function init_map() {
        //The initial map option
        mapOptions = {
            center: userPosition,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        //Init map
        map = new google.maps.Map(document.getElementById("map"), mapOptions);

        get_user_position();

    }

    $(document).ready(function () {

        init_map();
        $("#map").hide();
        google.maps.event.trigger(map, "resize");
        map.setZoom(map.getZoom());
        $("#map").show();


    });
});

$（函数（）{
var geocoder=new google.maps.geocoder（）；
变量位置=[{
地点：“布罗加德奥登塞丹麦”，
图片：“brodate.png”，
文字：“这很好”，
奖励：20
}, {
地点：“克里斯蒂安加德、欧登塞、丹麦”，
图片：“kochsgrade.png”，
文字：“优步尼斯”，
奖励：100
}, {
地点：“奥登塞丹麦河上游”，
图片：“overgrade.png”，
正文：“Smoooth:）”，
奖励：2000
}];
var cc=“”；
var标记=[]；
var infowindow=new google.maps.infowindow（）；
var映射；
var userPosition=new google.maps.LatLng（55.4000,10.3833）；
var defaultLocation=“Brogade-Odense-Danmark”；
//将所有标记重置为default，id=id的标记除外
函数重置标记（id）{
对于（变量i=0；i$”+location.raward+“raward
”）；
信息窗口。打开（地图、标记）；
marker.setIcon（location.image）；
});
}
});
}
函数init_map（）{
//初始映射选项
映射选项={
中心：用户位置，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//初始映射
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
获取用户位置（）；
}
$（文档）.ready（函数（）{
初始化映射（）；
$（“#映射”）.hide（）；
google.maps.event.trigger（map，“resize”）；
setZoom（map.getZoom（））；
$（“#地图”）.show（）；
});
});

用于防止引导失败的CSS：

   <style>#map label { width: auto; display:inline; }
   #map img { max-width: none; }</style>

#地图标签{宽度：自动；显示：内联；}
#映射img{最大宽度：无；}

这是我的分区和地图：

 <div id="map" class="right"  target="_blank" style="width:960px;height:350px"> </div>


在显示映射后触发调整大小事件。
您可以在加载映射之前检查DOM是否已经存在

setTimeout(function checkDomElement() {
    var overviewMapContainer = document.getElementById('googlemaps_overview');
    if (document.body.contains(overviewMapContainer)) {
        google.maps.event.addDomListener(window, 'load', initializePhilippines(imrGlobal.imrLatitude, imrGlobal.imrLongitude));
    } else {
        console.log($('#googlemaps_overview').css('height'));
        setTimeout(checkDomElement, 30);
    }
}, 30);

您需要包括设置map div大小的HTML/CSS。我已经编辑了这个问题。我用google.maps.event.addListenerOnce（map，“idle”，function（）{当前，在调用
$.show（）
之前触发了调整大小事件，这就是问题所在。