Google Maps Without the Scripting

Thursday, February 21, 2008 at 10:50:00 AM

If you're a regular reader of this blog, you probably already use the Google Maps API and love it as much as we do! But you may find it not useful for certain cases: the Google Maps API requires JavaScript, can take a while to load over slow connections, and requires some overhead to maintain a dynamic website.

The Google Static Maps API provides a simpler way to add maps to your website. Rather than use JavaScript, the Google Static Maps API creates map images on the fly via simple requests to the Static Maps service with HTTP requests. No JavaScript, no overhead. Just create a special URL as the src attribute within an <img> tag and let the Static Maps service create your image.

To see how easy the Static Maps API is to use, note the image below:

This image was created using the following simple <img> tag:

<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&size=512x512&key=MAPS_API_KEY">

(Note that you will need to replace the key parameter above with your own Maps API key. You can obtain a free key at http://code.google.com/apis/maps/signup.html)

When this blog post was displayed in your browser, the URL in the <img> tag was sent to the Static Maps service, which constructed an image based on the parameters passed in that URL. Voila! You can create maps up to 512 x 512 pixels, and at any zoom level or location on the face of the earth that Google Maps supports. You can even place markers on your map images! This Static Maps Wizard lets you play around with some of the options.

The Static Maps API is especially useful for pages in which you want a map to load quickly. You can even replace the generated Static Map with a JavaScript Maps API map after the page loads, allowing a seamless transition from a quick-loading map to a fully dynamic implementation.

Because the map generated by the Static Maps API is an image, you can also send it to your friends as an email attachment (especially handy for planning your next party!) or display it on any cell phone browser, whether or not it supports JavaScript.

Full documentation on constructing maps with the Static Maps API is available at:

http://code.google.com/apis/maps/documentation/staticmaps/index.html

As always, please post questions in the Maps API forum.