Google Static Maps Quick Start


Google Static Maps Quick Start

Google Maps provides an excelent means for obtaining maps given a specific geolocation or address. You can use one of the Google APIs or if you would like a simple method for obtaining an image of the location, you can follow this article on how to obtain this.

This article will show you how to quickly obtain an image of a given latitude and longitude coordinate. I am currently using this in an application I’m developing so that I can display the general area when looking at a customer record. This will help validate that the location is correct and give reference points for the roads around the location.

Note: If you would like to use a tool I made to build Static Map URLs and images for you, check out my Spyder Web Tools application.

How To

We will be building a URL that you will use inside of an IMG tag to display the image on your web page.

  1. Start with “http://maps.google.com/maps/api/staticmap?” (without the quotes of course).
  2. Add the center parameter to the URL with the specified coordinates (required).
    1. ?center=LATITUDE,LONGITUDE” (e.g. ?center=38.89859,-77.03597)
    2. “?center=URL+ESCAPED+ADDRESS” (e.g. ?center=123+Some+St,New+York,NY)
  3. Add the sensor parameter to the URL (required).
    1. This indicates whether the device you’re using is getting its location information from a sensor. This is required to use Google static maps API.
    2. &sensor=SENSORUSED” (e.g. &sensor=false)
  4. Add the zoom level parameter to the URL (optional).
    1. Acceptable levels are 0 (entire Earth) to 21+ (streets & buildings). I find 14 is a good value for my needs.
    2. &zoom=ZOOMLEVEL” (e.g. zoom=14)
  5. Add the size parameter to the URL (required).
    1. Values are noted in pixels wide by pixels high separated by a “x” character. Sizes from 0-640 in either direction are possible with the maximum size being 640×640.
    2. &size=WIDTHxHEIGHT” (e.g. &size=400×500)
  6. Add the format parameter to the URL (optional).
    1. Possible image formats are png, png8, png32, gif, jpg, jpg-baseline.
      1. The jpg & jpg-baseline provide smaller image sizes, but at the cost of quality of image.
    2. &format=FORMAT” (e.g. &format=png)
  7. Add the maptype parameter to the URL (optional).
    1. Possible values are roadmap, satellite, terrain and hybrid.
    2. &maptype=MAPTYPE” (e.g. &maptype=hybrid)
  8. Add the markers parameter to the URL (optional).
    1. The markers parameter is formatted MARKERSTYLES|LOCATION1|LOCATION2|…
    2. Marker Style is made up of three values SIZE, COLOR and LABEL which are separated by a pipe “|” symbol.
      1. Size can be tiny, mid or small. No value defaults to normal size.
      2. Color can be any 24-bit color in hexidecimal notation (e.g. 0xFFFFCC) or a predefined color name (e.g. black).
        1. Colors: black, brown, green, purple, yellow, blue, gray, orange, red, white
      3. Label specifies an upper case character (i.e. A-Z, 0-9) to place on the marker.
    3. &markers=color:COLOR|label:LABEL|LATITUDE,LONGITUDE” (e.g. &markers=color:blue|label:S|38.89859,-77.03597)

Putting it Together

Here are some examples of what you can put together from above. Please note that the first parameter must be proceeded with a question mark character (?) whereas the remaining parameters must be proceeded by an ampersand character (&).

URL: http://maps.google.com/maps/api/staticmap?center=38.89859,-77.03597&size=100×100&sensor=false
Simple Map

URL: http://maps.google.com/maps/api/staticmap?center=38.89859,-77.03597&size=100×100&zoom=14&sensor=false
With Zoom

URL: http://maps.google.com/maps/api/staticmap?center=38.89859,-77.03597&size=100×100&markers=color:yellow|label:L|38.89859,-77.03597&sensor=false
With Marker & Zoom

Summary

There are several other options you can use to customize the image you receive back from the Google Maps service. You can read about these in the Google Static Maps API V2 Developer Guide. Please let me know if this tutorial has helped you by leaving a comment.

Advertisements

6 thoughts on “Google Static Maps Quick Start

  1. Nathon, thanks for putting this together. I’m doing something wrong, when I place the url in the img tag, I see this error: In XHTML 1.0 Strict the attribute ‘http://maps.google.com/maps/api/staticmap?markers’ is not permitted for the tag.
    Any suggestions?

  2. Hmmm, can you post your entire img tag? It should look something like this.

    <img src="http://maps.google.com/maps/api/staticmap?center=38.89859,-77.03597&size=100×100&markers=color:yellow|label:L|38.89859,-77.03597&sensor=false" />

    Also remember to include the items from the article that I showed as required (e.g. sensor).

  3. Static maps driving me crazy, trying to use them in my wp blog that I am creating. I copy and paste exactly what you have in the reply above onto a wp page to test it, all that I get is the image holder with the alternate text. Not using a sensor (at least that I am aware of). While in page edit I click on img tab then added the url above, then prompted to add alt text, did that. Even used the API static map generator tool and tried another url, nothing. Any suggestions?

    1. Hi Newman,

      I’m sorry to hear that you’re having troubles with static maps. The first thing I would do is to open the WP page you added the image tag to, then right-click on the page somewhere (in a blank area) and select “View Source” from the context menu that appears. This will cause notepad (or whatever your default HTML editor is) to open with the source code for the page. Search for the image tag you added to the page and copy out the entire tag and post that back in a reply to my comment. Sometimes using Find (CTRL+F) to search for the URL is easier than just looking through it.

      Please include the entire start tag, URL, alt and close. Then we can better see why the image isn’t loading. It should look something like this. If the beginning and ending brackets were converted to “> and <“, please include those as well.

      Alt Text

      Thanks,
      Nathon

  4. Actually I finally got it to work after inserting my API key, self hosted wp blog. Didn’t realize until after submitting that you were hosted by wordpress.com.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s