Google Static Maps API is an easy way to provide a map when the user doesn’t have Javascript available. Sure it’s not near as powerful as the full Google Maps API but still, it can provide you with a basic map that can contain both markers and paths.

A basic map

The basic concept is to generate an image by adding a regular image tag <img> to the document and in the src attribute add an URL to Google that generates a map image. In the querystring of the URL you define how the map will appear.

Here’s a basic example:

<img src="http://maps.google.com/staticmap?center=59.1,14.0&zoom=6&size=420x300&key=YOUR_KEY_HERE" alt="" />

which will result in this image:

The parameters used in this example are:

• center
  Defines the center of the map with a coordinate (x, y)
• zoom
  Sets the zoom-level (1-18)
• size
  Defines the size of the map in pixels (width x height)
• key
  Your Google Maps API key. Note that in the example URL the key is omitted. If you don’t already have a key you can sign up for one for free.

Adding markers

The use of markers in the map is quite limited but you can put up to 50 markers on a map in 10 different colors and in 3 different sizes with an optional letter in it on the map. Naturally you can’t interact with them in any way since that requires Javascript.

The basic syntax is:

markers=markerDescriptor1|markerDescriptor2|markerDescriptor3|

Each marker is separated with a pipe character (|). It’s then defined with its coordinates and then with its characteristics: lat, lng, size|color|letter. The last parameter is the most cryptic one since the words are all crammed together. A normal sized red marker with the letter A in it will look like midreda (eg. mid red a).

This code will generate 3 markers with different characteristics. The first one will be a normal red marker with the letter A in it [midreda]. The second one will be small with the color green [smallgreen] and the last one will be really small and orange [tinyorange].

markers=59.0,13.8,midreda|59.35,15.60,smallgreen|59.73,13.12,tinyorange

The parameters in this example are:

• latitude
  The latitude of the markers position.
• longitude
  The longitude of the markers position.
• size
  Defines the size of the marker. Valid values are mid, small, tiny. If none is specified it defaults to mid.
• color
  The marker can have one of 10 different colors Valid colors are: black, brown, green, purple, yellow, blue, gray, orange, red, white. Default is red.
• alphanumeric-character
  An optional character can be placed inside medium sized markers [a-z] [0-9]. Note that small and tiny markers cannot contain a character.

No need for center or zoom

One cool thing with static maps is that if you have markers on it you don’t have to define the center of the map or the zoom-level. It’s automatically calculated for you so all markers will fit. You can of course override it by explicitly defining center and zoom.

Adding paths

A path is a line built up of 2 or more coordinates. To add a path to a static map you use path: with a set of parameters.

There’s two kinds of parameters. The first kind defines the visual look of the path and the second kind the coordinates.

The visual look of a path

There are three parameters for the visual look of a path:

• rgb
  This is a 24-bit hex color value determining the color of the path. For example rgb:0x0000ff. With this parameter you can’t control the opacity of the path which defaults to 50%
• rgba
  This is a 32-bit hex color value determining the color of the path. The last 2 characters sets the alpha channel. For example rgba:0x0000ffff
• weight
  Specifies the thickness of the path in pixels. For example weight:5

The coordinates

A path is made up of 2 or more coordinates. You can currently have up to 100 coordinates for each path. The coordinates are separated by a pipe character (|) like this: 59.0,13.8|59.2,13.9.

A red semi transparent path made up of 5 coordinates would for example look like this

path=rgb:0x0000ff,weight:5|59.0,13.8|59.2,13.9|59.0,13.0|59.5,13.0|58.1,12.8

Note that just like with the markers you don’t need to supply the map with center and zoom level when using a path. The map will automatically display in a way so that the entire path is visible.

Optional parameters

There’s some other things you can do with this API. Here’s some more optional parameters to play around with.

• format
  This paramater lets you determain which image format the returned map should be in. Valid values are: gif, jpg, jpg-baseline, png8, png32. Default value is gif.
• maptype
  Defines the maptype. Possible values are roadmap, satellite, terrain, hybrid, and mobile. The default value is roadmap
• span
  This defines the minimum size of the viewport expressed as a latitude, longitude. The API calculates the appropriate from the center point and the span. If zoom is defined span is ignored.
• frame
  Defines that the image should be framed with a 5px, 55% opacity blue border. Valid values are true or false.
• hl
  Sets the language to be used on tile labels. Not all tiles support different languages, on these the default language is used.
• sensor
  This parameter specifies if the application is using a sensor to determine the users location. Valid values are true or false.

For a full description of the Google Static Maps API, visit the API page at Google.

The Static Map Wizard

If you’re lazy you can use the Static Map Wizard to create the URL for you. It’s an excellent tool making it really easy to create a map with markers and polylines.

It’s done in four easy steps.

1. Find the place on the map you want to show. Draw polylines and insert markers into the map by dragging and dropping.
   
2. Define how you want the map, markers and paths to appear
   
3. Watch the generated image
   
4. Get the created URL
   

   http://maps.google.com/staticmap?center=37.400465,-122.073003&markers=37.404119,-122.061024,brown|37.391436,-122.053299,brown&path=rgba:0xff000099,weight:6|37.39561,-122.08952|37.39125,-122.07064|37.40025,-122.06188|37.40998,-122.10291|37.39561,-122.08952&path=rgba:0xff000099,weight:6|37.38947,-122.10686&zoom=13&size=300x300&key=YOUR_KEY_HERE

Note that you manually have to add your API key at the end of the URL.

Conclusion

The Google Static Maps API is naturally not a replacement for the full Google Maps API. But it can provide basic functionality when you either just want a really simple and lightweight map or when the user doesn’t have Javascript available.

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com