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:
Defines the center of the map with a coordinate (x, y)
Sets the zoom-level (1-18)
Defines the size of the map in pixels (width x height)
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.
The basic syntax is:
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].
The parameters in this example are:
The latitude of the markers position.
The longitude of the markers position.
Defines the size of the marker. Valid values are
tiny. If none is specified it defaults to
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.
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.
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:
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%
This is a 32-bit hex color value determining the color of the path. The last 2 characters sets the alpha channel. For example
Specifies the thickness of the path in pixels. For example
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:
A red semi transparent path made up of 5 coordinates would for example look like this
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.
There’s some other things you can do with this API. Here’s some more optional parameters to play around with.
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.
Defines the maptype. Possible values are roadmap, satellite, terrain, hybrid, and mobile. The default value is roadmap
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.
Defines that the image should be framed with a 5px, 55% opacity blue border. Valid values are
Sets the language to be used on tile labels. Not all tiles support different languages, on these the default language is used.
This parameter specifies if the application is using a sensor to determine the users location. Valid values are
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.
- Find the place on the map you want to show. Draw polylines and insert markers into the map by dragging and dropping.
- Define how you want the map, markers and paths to appear
- Watch the generated image
- Get the created URL
Note that you manually have to add your API key at the end of the URL.