谷歌地图只显示半屏？答案

【问题标题】：Google Map only show half screen?谷歌地图只显示半屏？
【发布时间】：2013-02-24 12:37:29
【问题描述】：

谷歌地图只显示一半的屏幕。我尝试通过调整大小进行修复：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();


    });
});

用于防止引导失败的 CSS：

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

这是我的 div 和地图：

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

【问题讨论】：

您需要包含设置地图 div 大小的 HTML/CSS。
我已经编辑了问题。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

在显示地图后触发调整大小事件。

【讨论】：

我用 google.maps.event.addListenerOnce(map, "idle", function(){ 修复了它
目前你触发了调整大小事件之前你调用$.show()，这就是问题所在。

【解决方案2】：

你可以在加载地图之前检查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);

【讨论】：