Google Maps api and iPad/iPhone zoom and scale issues when orientation is changed

I recently bought an iPad and I’m absolutely loving it. It also happened to coincide with an exciting project that I’m working on that requires the Google maps API to work on an iPad. The project required a full screen map, but when switching from landscape to portrait or vice versa the zoom level would be off. The Google maps controls would also be off the page, page graphics were also blurry due to being zoomed, even the Google Map itself was blurry. After much tweaking, fiddling and scratching my head, the fix turned out to be quite simple to fix.

This quick tutorial will not go into the details of how to use the Google maps API, for that I refer you to the starter tutorial which is missing the fix needed to make the maps display properly in the iPad. This issue also affects the iPhone and should fix any problems there too. After thinking it was a CSS issue and fiddling with the CSS for over an hour I stumbled across more metadata options. In the Google example linked above, it shows a metadata name attribute of  “viewport” with content attribute values of “initial-scale=1.0, user-scalable=no”. You need a bit more than this for the iPad and iPhone. See below.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

The most important value is maximum-scale=1.0, width=device-width is just in there for good measure.  Basically this stops Safari from scaling or zooming your viewport when the orientation is changed. One note, sometimes the Safari browser won’t forget the way it was displaying before you made your changes, a quick stop in options -> Safari and you will find a clear cache option.