Google Maps API Issues

Over the weekend I attended the DCWEEK Hackathon and while there developed an application that made heavy use of google maps. I ran into some issues when integrated jquery mobile and google maps, I found the following article after the fact that details alot of the problems I had.

The problems boil down to NOT having the div visible that the map will display into when google maps is initialized.

Solutions:

1. Off-left technique

1. .ui-tabs .ui-tabs-hide {
       position: absolute;
       left: -10000px;
   }

2. Resize the map when idle
1. The below can also be combined with a setTimeout, which I had to use to get it to work when deployed to a phone browser. HACK I know

2. google.maps.event.addListenerOnce(map, 'idle', function() {
       google.maps.event.trigger(map, 'resize');
       map.setCenter(point); // be sure to reset the map center as well
   });

3. Asynchronously Loading the API

http://stackoverflow.com/questions/1428178/problems-with-google-maps-api-v3-jquery-ui-tabs