jump to navigation

Adding Static Maps on your Website with Google-Maps September 3, 2011

Posted by Tournas Dimitrios in Uncategorized.

The Google Static Maps API lets you embed  Google Maps images into your web pages without requiring JavaScript or any dynamic page loading . Off course static maps also has the weakness of being static , which means , that zooming , panning , and interacting with the map isn’t  possible .The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page . The general syntax for the static map API is :
Simple example (my position on the map) :

<img src="http://maps.google.com/maps/api/staticmap?markers=color:blue|label:A|37.9833 ,23.7333&center=37.9833,23.7333&zoom=8&size=300x200&sensor=false&maptype=hybrid" alt="" />

The parameters can be divided into these categories :

  • Location Parameters : The location parameters specifies the location that the map will display. The Static Map API supports the following location parameters:
    1)center (required ) 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”)
    2)zoom (required ) defines the zoom level of the map , which determines the magnification level of the map . This parameter takes a numerical value corresponding to the zoom level of the region desired  . Zoom levels between 0 (the lowest zoom level , in which the entire world can be seen on one map) to 21+ (down to individual buildings)
  • Map parameters : These define the properties of the map .
    1) size (required) defines the rectangular dimensions of the map image
    2)scale (optional) affects the number of pixels that are returned. scale=2 returns twice as many pixels as scale=1 .This is useful when developing for high-resolution displays, or when generating a map for printing. The default value is 1 . Accepted values are 2 and 4 (4 is only available to Maps API Premier customers .)   
    3)format (optional) defines the format of the resulting image. By default, the Static Maps API creates PNG images
    4)maptype (optional) defines the type of map to construct. There are several possible maptype values, including roadmap, satellite, hybrid and terrain .
    5)language (optional) defines the language to use for display of labels on map tiles
  • Marker parameters : Markers can be used to display additional information on the map , and not just one point .
    1)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.
    2) 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.
    3)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”

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 .

A simple method  to get lat/long of a single point is to search for the location on 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 .

Of course , instead of setting the coördinates of the map (lang/longitudes) as static values , we can implement some server-side logic and create dynamically generated pointers on the static Map .



1. Rajat Chodhary - December 10, 2012

Verdict about this post: 10/10

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s