Unobtrusive Google Maps with jQuery

Published March 05, 2011

Note: I managed to delete this post in a migration some time ago. I have not been able to recover it. I've gotten some e-mails from people reporting the 404, so I'm putting it back online by writing a small summary of what was originally in it.

See it in action on the demo page.

There's also a drop-in jQuery plugin.

The technique works with any framework, though.

A summary, sort of.

Google Maps is relatively resource hungry. On desktops you hardly notice the load time of a Google Map, but on notebooks and smartphones you do.

Instead of loading full JavaScript Google Map, use the Google Static Maps API to load a plain flat JPEG image. When the user clicks/taps that image, replace the image with a full JavaScript Google Map. That way, you get nice and fast page load speeds, and a full featured map when the user interacts with it.

See the demo and the code above for details.


Questions or comments?

Feel free to contact me on Twitter, @augustl, or e-mail me at august@augustl.com.