Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.