Saturday, December 24, 2011

JQTouch and Google Maps API Rendering Issues

Really quick one today. Today I implemented Google Maps into my JQTouch webapp using the Google Maps Javascript API V3.

Seemed easy enough except I was having a lot of rendering issues with the Google Maps (lots of gray areas where maps weren't rendering).

The key is, the Map constructor for Google Maps takes into account a div and renders a map in it. Let's call that the "map-div".

The issue was that I was using Javascript to render the map, then I called a jQT.goTo("#mappage") which changed the positioning of the map-div tag where the map was being rendered.

Quick solution: navigate to the page where the map-div is first - then do the Google Maps rendering. In my case, I had to call the jQT.goTo("#mappage") first, then I did my Google Maps rendering. Problem solved. Maps rendered gorgeously!

No comments: