Google地图只显示半屏？

Question

Google地图只显示屏幕的一半。我尝试了调整大小：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

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

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