Adding static maps to your blog or website

adding statis maps to your website or blogThere can be numerous of situations where a map can be very useful to display on your website or blog.

The map can be obtained as a static image from a stock photo library, or you can use one of the free map services on the internet. Since we’re big fans of scalable solutions that can be automated, we’ll focus on the free static map services on the Internet.

In this post we’ll learn you to use the static map api from Google.

Why a static map

Displaying a static map has a few very important advantages:

  • No advanced javascript required
  • No need to modify the page headers, just insert a normal image tag, and you’re done
  • Works fine for users with javascript disabled
  • A fully dynamic map might be overkill in many situations
  • Can be very useful in solutions for mobile- or other devices with limited javascript capabilities

Off course static maps also has the weakness of being static, which means, that zooming, panning, and interacting with the map isn’t easily possible.

This guide is based on the Google Static Map API. It’s worth noticing, that the API is limited to 1.000 unique (different) image requests per viewer per day. The important thing is, that the limit is per viewer and not per site, so under normal circumstances, this shouldn’t be a problem.

Static map syntax

The general syntax for the static map API is:

http://maps.google.com/maps/api/staticmap?parameters

The parameters can be divided into:

  • Location parameters
  • Map parameters
  • Feature parameters
  • Reporting parameters

Location parameters

The location parameters specifies the location that the map will display. The Static Map API supports the following location parameters:

  • center defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either a comma-separated {latitude,longitude} pair (e.g. “40.714728,-73.998672”) or a string address (e.g. “city hall, new york, ny”) identifying a unique location on the face of the earth.
  • zoom defines the zoom level of the map. This parameter takes a numerical value corresponding to the zoom level of the region desired.

Please notice, that if markers has been defined, center and zoom isn’t required, these will automatically be calculated based on the most appropriate map for the required information.

Map parameters

The map parameters defines the properties of the map:

  • size (required) defines the size of the map image. This parameter takes a string of the form valuexvalue where horizontal pixels are denoted first while vertical pixels are denoted second.
  • format (optional) defines the format of the resulting image. By default, the Static Maps API creates PNG images, but you can also use the parameters: GIF or JPEG. JPEG provides the highest compression, where  GIF and PNG provide greater detail.
  • maptype (optional) defines the type of map. There are several possible maptype values, including roadmap (normal map), satellite, hybrid (sattellite map with road overlay), and terrain.
  • mobile (optional) specifies whether the map will be displayed on a mobile device. Valid values are true or false. Maps displayed on mobile devices may use different tilesets optimized for those devices.
  • language (optional) defines the language to use for display of labels on map tiles.

Marker parameters

Specifying marker is optional. Markers can be used to display additional information on the map, and not just one point.

  • markers (optional) define one or more markers to attach to the image at specified locations. This parameter can be defined by geography identification data for each point,  separated by the pipe character (|). Multiple markers may be placed within the same markers parameter as long as they exhibit the same style; you may add additional markers of differing styles by adding additional markers parameters.
  • path (optional) defines a single path of two or more connected points to overlay on the image at specified locations. This parameter takes a string of point definitions separated by the pipe character (|). You may supply additional paths by adding additional path parameters.
  • visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the static map.

Reporting parameters

  • sensor (required) specifies whether the application requesting the static map is using a sensor (eg. GPS)to determine the user’s location. This parameter is required for all static map requests. The sensor parameter can have the value “true” or “false”

Simple example map

This is a simple 400×250 pixels example map, that displays the center of Paris defined by lat/long coordinates:


<img src="http://maps.google.com/maps/api/staticmap?center=48.857988,2.294254&zoom=16&size=400x250&sensor=false" alt=""/>

Google Static Map API Paris

To show the possibilities with the static map, the next map is a little more advanced. This map shows a hybrid map of Paris, displaying the famous attractions: The Eiffel Tower, Notre Dame and the Triumphal Arch with a blue marker, labelled with a “A”, and two nearby metro stations with a green marker, labelled “M”. Please notice, that now that several markers has been set, a center and zoom level isn’t required.


<img src="http://maps.google.com/maps/api/staticmap?markers=color:blue|label:A|48.853200,2.349089|48.873767,2.295005|48.857988,2.294254&markers=color:green|label:M|48.871906,2.300649|48.867389,2.313566&maptype=hybrid&size=400x250&sensor=false" alt=""/>

Final comments

If you’re not a map geek, getting lat/long data like used in the example can be difficult. One of the easiest ways to get lat/long of a single point is to search for the location on google maps.

How to find lat/long with Google Maps

Right click on the desired destination, And select “Whats here?” from the menu. Then the lat/long of this point will be displayed in the Google Maps search field.

If you need to display statis maps of many addresses where you don’t have lat/long, using the Google Geocoder API can be very useful. To access the API you need need a Google Maps API key. The key is free, and can be obtained here.

With the key you can request the geocoder for addresses in the following way:

http://maps.google.com/maps/geo?q=1600+pennsylvania+ave+washington+dc&output=xml&key=[enter your key here]

This request will return a answer in XML, that can be used either directly in your application, or saved in a database.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

9 Replies to Adding static maps to your blog or website

  1. I usually don’t usually post on many another Blogs, however I just has to say thank you… keep up the amazing work. Ok unfortunately its time to get to school.

  2. Very often I visit this blog. It very much is pleasant to me. Thanks the author

  3. MarkSpizer says:

    great post as usual!

  4. Wow this is a great resource.. I’m enjoying it.. good article

  5. Marvelous! This amazing is all I can think to find a article like this unique. This important is very a incredibly educational write-up. You should certainly know a lot about this kind of

  6. emt training says:

    Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  7. Yung Balaz says:

    Nice post man Thanks

  8. Great post helping me to understand. Waiting to come back for your next blog.

Comments are now closed for this article.