Google Static Map API Introduction

On several of my previous blog posts I ran into the need to show something on a map. While Google Maps was the initial idea to implement, all I wanted was a single image with a few lines or markers. Embedding a map seemed a bit much for this simple task. My second idea was taking screen shots of a Google Map with the lines/markers displayed, which is probably copyright infringement. This last idea led me to my solution: Google's Static Map API.

I've worked quite a bit with Google Maps in the past and really enjoy their API. It's easy and fun to work with, and the end result is simply amazing. The Static Map API, while being more restrictive in features, is no different.

The first step is signing up for an API key on Google's Site. This key is tied directly to the domain that your project is on, so you'll probably end up creating a few keys. After this is done, you can embed an image on your site just like any other image.

<img src="http://maps.google.com/maps/api/staticmap?
size=500x375&
key=ABQIAAAAveiUK_AIS-m9Su-mKaTx2xTetCaTViHJ4OW2Yk9IU5rIYYQMAxQYRksvMBCFuDLcQvbqJSrKpCR_Ew&
sensor=false" alt="Simple Image" height="375" width="500" />

This image doesn't do much, though - it has no center point or zoom levels. You can add those easily.

<img src="http://maps.google.com/maps/api/staticmap?
center=Appleton,WI&zoom=12&
key=ABQIAAAAveiUK_AIS-m9Su-mKaTx2xTetCaTViHJ4OW2Yk9IU5rIYYQMAxQYRksvMBCFuDLcQvbqJSrKpCR_Ew&
sensor=false" alt="Appleton, WI" height="375" width="500" />

Now that we've gotten this setup it's time to start playing with the settings. Below is a partial list of get name/value pairs to tweak the image.

size: 480X361 - changes the size of the outputted image
maptype: terrain - changes the maptype between the Google Map types
format: jpg - changes the type of image output (default is png)

You can always view more options at the Static Map API documentation.

Now, let's setup a map with markers. Each marker is defined independently and can have custom properties (aka unique colors and labels) with a few settings. You can use a string address for the markers (like I did for the center variable above) or latitude-longitude pairs - I prefer the latter.

<img src="http://maps.google.com/maps/api/staticmap?
center=44.260,-88.415&size=500x375&zoom=12&maptype=hybrid&
markers=color:blue|44.244,-88.380&
markers=size:tiny|color:red|44.282,-88.440&
key=ABQIAAAAveiUK_AIS-m9Su-mKaTx2xTetCaTViHJ4OW2Yk9IU5rIYYQMAxQYRksvMBCFuDLcQvbqJSrKpCR_Ew&
sensor=false" alt="Appleton, WI w Markers" height="375" width="500" />

After working with Google Maps for so long my first instinct is always to click the markers to see the popup. However, everything is being compressed as a solid image beforehand, even the overlays, and it's all static. The speed at which Google is able to serve up these custom images is impressive - there's only a bit of a delay.

Working with lines is a bit more complicated. For the best results (and largest polylines) you'll need to encode it. Google has a small utility for doing this at their site, but after using it a few times I've decided to make my own on the backend to handle it. While it looks a bit scary, it's just an encoded of set of lat/lon pairs. Below is an example from one of my upcoming posts that uses polylines.

<img src="http://maps.google.com/maps/api/staticmap?
size=500x375&maptype=terrain&
path=weight:3|color:red|enc:cym|GlpqvOdAviB_Qrt@jQ`G~P|S?jb@dZjx@lCny@de@vQxNyh@``@mLdOrGbKqNbd@xYhBvkJ`CtOyCzSUza@oRdf@kMhKwNd_@Tp]iTpUaUnr@nGpd@yNr^uPvBgIbWuBphJ~b@xJzDtW{HrVzDdQ|H`Nc@jSjJ`GVdXy@jSpe@jfAoDfQhI`e@_Fb^VpiD~TtHbNs@hF`V}e@rVuIsGmg@|i@lJzReDpNfNjb@{FvXmNxJeVzD_JfQoKvsAjFvIhF`e@oKhR|H~TrEcAb@`O`EaDpJbEbE`TdPpLzAlGoAtFiDdBcBdKuCbDp@t]|CpJ}@pCuHxAiJtNuPjF}e@vK_XiC_JbhB_c@vIiT`l@uM~y@&
key=ABQIAAAAveiUK_AIS-m9Su-mKaTx2xTetCaTViHJ4OW2Yk9IU5rIYYQMAxQYRksvMBCFuDLcQvbqJSrKpCR_Ew&
sensor=false" alt="Triple A Road" height="375" width="500" />

That's all you really need to know about Google's Static Map API. The only frustration I've had so far involves polyline limits - one per image. It'd be nice to have several polylines displayed on one image, even if they are limited by colors or settings. Also, all of these images break in feed readers. That makes sense, though, as the image is tied to my domain. Other than that, I found that this simple API is perfect for displaying map images without breaking copyright laws. You can visit Google's Developer Guide for full documentation.