title: google maps refreshing grey
body: <p>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, <strong>most of the map is greyed out</strong>.  I've done some research and apparently I must add the command:</p>
  
  <pre>google.maps.event.trigger(map, 'resize');</pre>
  
  <p>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:</p>
  
  <pre>
  
        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');
  </pre>