Embedding Static Google Maps

Embedding static google maps doesn’t seem like something you’ll ever need to use… until you have a client who wants to create dynamic PDF’s WITH a google map.

Great News! It’s actually relatively easy.

How It’s Set Up

The google map is effectively changed into an image:

<img src="http://maps.googleapis.com/maps/api/staticmap?center=111+Street+Address,Santa+Clarita,CA&zoom=14&size=512x512&maptype=roadmap
&markers=color:blue%7C111+Street+Address+CA&sensor=false" />

Notice the source of the image is now pointing to Google.

When you change/add options, you always include everything up to (and including) “?center=”.

If you want to open up the actual Google documentation, here it is: http://code.google.com/apis/maps/documentation/staticmaps/

Options

There are tons of options, but I’m only going to cover a few.

Using an Address. The original documentation has latitudes and longitudes instead of an address. But let’s be honest… no one knows the latitudes and longitudes; We use addresses. So in the example above, I just replaced them with the address to start with.

Notice, you need to add the address twice. The first time, the address has ‘+’ between each part, except it has a comma between the street and the city and the state. The second time doesn’t have the commas and also doesn’t have the city.

Zoom. Changing the zoom by 1 is a huge difference. Think of it like the bars on the left of the Google Maps. Each time you zoom in significantly changes the zoom level.

Size. The size is in pixels. Nothing too difficult for that one.

Map Type. The map types are the same as the titles on the actual Google Maps. Options are “roadmap”, “satellite”, “terrain”, “hybrid”.

Markers. This is for those little upside-down raindrops that show up on the screen. Frankly, it doesn’t help to have a map without a marker to show where the address is, so these are really important.

First thing to know about the Markers is that it takes the information in bits that are separated by “|”. However, since you can’t use “|” in urls, it replaces it with “%7C”. So every time you see the “%7C” in the coding at the top, it’s starting a new section.

There are a few styles we can add to the Markers: Color (“color:blue”; or Hex Number – #000000), Size (“size:mid”; additional options: tiny, small), Label (“label:S”; additional options: any one alphanumerical character), Icon (“icon:http://www.iconURL.com”; this is an icon inside of the Marker and can be any URL; it cannot include “&” or “%” characters unless they are replaced with their coding equivelents)

 More Goodies

There’s a ton more you can do with Google Static Maps, including changing the colors of the map and adding directions. If you want to go big, check out the official documentation:

http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes