要解决这个问题，您需要：

1. 确保地图显示的div有一个有效的大小，如果它隐藏了，它将会有零大小，你需要在div显示之前显示有一个有效的大小。如果使用百分比确定其大小，请确保其所有父元素都具有百分比大小或特定大小（请参阅




2. 一旦它有一个大小初始化地图（if你还没有）
   

3. 如果它已经被初始化了，就触发resize事件。




4. 您可能需要在触发resize事件后设置地图的中心。 没有提供足够的信息来查看你出错的地方。
   

   I'm trying to add a Google Map to a jquery.mobile site javascript and the Google Maps API. The problem is that every time I load the map, most of the map is greyed out. I've done some research and apparently I must add the command:

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

   But I've been fiddling with this for the last few hours and I can't seem to make it work. This is the code I'm using:

   
         var myLatlng = new google.maps.LatLng(34.310774,66.225586);
   
         var mapOptions = {
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
   
         var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
   
         // boundry
         var southWest = new google.maps.LatLng(31.207164,61.347656);
         var northEast = new google.maps.LatLng(37.617713,69.785156);
         var bounds = new google.maps.LatLngBounds(southWest,northEast);
   
   
         map.fitBounds(bounds);
         google.maps.event.trigger(map, 'resize');
   

   To solve that problem you need to:

   1. make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).

   2. once it has a size initialize the map (if you haven't already)

   3. if it was already initialized, trigger the resize event on it.

   4. You may need to set the center of the map after triggering the resize event.

   You haven't provided enough information to see where you are going wrong.