Mapping your location with Google Static Maps API (tutorial)
Posted: March 18, 2011 Filed under: code/files, libraries, webdev | Tags: geo, google maps 5 CommentsThe Google Static Maps API (code.google.com/apis/maps/documentation/staticmaps/) allows for a dead simple way to embed maps showing a specific location for mobile and desktop environments. The real advantage of the Google Static Maps API is that the embed comes in the form of an HTML image <img> tag. In this quick codelab tutorial, I’m going to show you how to create a static map and set a location using the Google Static Maps API. If you have a familiarity with HTML, the markup for the image should be familiar.
<img src=”http://maps.google.com/maps/api/staticmap?center=Bozeman,MT&zoom=13&size=310×310&markers=color:blue|45.666671,-111.04859&mobile=true&sensor=false” />
As I mentioned earlier, it is a simple <img> tag with a call linking into the Google Static Maps API. In order to assign a specific location we need to pass a few parameters to the Google Static Maps API. Included among the customizations:
- A central location for the map
- A zoom level for the map
- A size for our map image
- A marker color and position using latitude and longitude
- Set the map to display for mobile settings without a sensor
The necessary pieces to enter are a central location and your specific latitude and longitude. Enter your hometown for the central location in the format of {city, state or principality}. To get your latitude and longitude, visit gmaps-samples-v3.googlecode.com/svn/trunk/geocoder/getlatlng.html and type in your library address. Copy the latitude and longitude values that are returned. Enter these position values as a comma separated string {latitude,longitude}.
Here’s the image src= markup with cues for where to add your values.
http://maps.google.com/maps/api/staticmap?center={YOURHOMETOWN}&zoom=13&size=310×310&markers=color:blue|{YOUR LATITUDE/LONGITUDE}&mobile=true&sensor=false
Once you have the link filled out add it to your image <img> tag on a live HTML page and you will have a local map to your library or any other specific location.
DigInit: digital initiatives 
Thanks for the post. Here’s a geocoding feature that will make your applications smarter and more interactive. Instead of displaying plain text, any address-centric data can be displayed on your site with a live map from Yahoo! or Google. Users will get more accurate information and be engaged in the process http://www.caspio.com/extend/platform-extensions/map-mashup.aspx
thanks for the article, really helping. One question though, what if you want to use the postal code and not the lat&long? Thanks again.
Hi, Vic,
The Google static maps API allows for addresses as a value in the “center” parameter. The documentation specifies that valid, full addresses will be geocoded. There is no mention of postal codes.
https://developers.google.com/maps/documentation/staticmaps/#Addresses
As a test, here is a static map API URL with an address set as the “center” value.
http://maps.googleapis.com/maps/api/staticmap?center=626+E+Main+St+Bozeman+Montana+59715&zoom=10&size=600×300&sensor=false
It looks like you can use just the postal code and get a similar result.
http://maps.googleapis.com/maps/api/staticmap?center=59715&zoom=10&size=600×300&sensor=false
Note that the “center” parameter just finds a center point for the map. Your question is about the markers, right? Markers need to have lat/lng values to register as a specific point on the map. If you need to get the lat/lng values, you can try this utility – http://gmaps-samples.googlecode.com/svn/trunk/geocoder/singlegeocode.html. This geocoding utility does accept postal codes and gives a generic lat/lng values in return. Could be a place to start if all you have are postal code values.
Thanks Jason, it’s exactly what I needed!
Thanks for using latitude and longitude for adding markers…this is not given in the google maps static api page.