Monday, November 5, 2012

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

No comments:

Post a Comment