javascript - グーグルマップは半分の画面しか表示しませんか？

Question

グーグルマップは画面の半分しか表示しません。サイズ変更で修正を試みました 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>

Answer 1

マップを表示した後、resize-eventをトリガーします。

Answer 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);