Traditionally, the easiest way to get a Google Map on your web page is to embed one using an inline frame HTML element (my tutorial). While this works great and even results in an interactive map, it’s slow to load and iframes are clumsy. Thankfully Google is well aware of these issues and created the Maps Image API to offer a simple alternative.
Maps Image API overview
The Google Maps Image API is used like a regular static image. Upon requesting a map with a Maps Image API URL, a Google server will process your request, generating an image of the desired map, and return the map as either a JPEG, GIF or PNG file. All of this occurs completely transparently and near instantaneously. You actually put the Image API URL into a normal <img> HTML tag and your users just see a simple static image file.
Needless to say, this is much faster to load than using a fully interactive Google Map embedded into an iframe. To further sweeten the deal, the map image will be cached by the user’s browser and if your site uses a Content Delivery Network (CDN), the map will be accelerated because for all intents and purposes it is static content. The Image Map API can return all types of maps (roadmap, satellite, hybrid, terrain) and it even works with Street View images.
The only time you wouldn’t use an image map is if your map absolutely must be interactive.
The basics
The maps image API is used in the exact same way as normal images. Just stick a properly formatted image API URL into anything that accepts an image URL, like an HTML tag, and you’re done.
A properly formatted maps image API URL looks like this:
http://maps.googleapis.com/maps/api/staticmap?parametersThe parameters is a comma separated list of map parameters that define how your map image will be built and what it displays. You can also add markers and paths to your map. For example, here’s a map of downtown Toronto with the CN Tower (blue C), Maple Leaf Gardens (green M) and Robarts Library (red R) marked.
This map uses the URL:
http://maps.googleapis.com/maps/api/staticmap? center=Toronto,ON& zoom=14& size=500x500& maptype=roadmap& markers=color:blue%7Clabel:C%7C43.641631,-79.38683& markers=color:red%7Clabel:R%7C43.664491,-79.399434& markers=color:green%7Clabel:M%7C43.66171,-79.380887& sensor=false
You can see that eight parameters were used to create the above map. The zoom level, map size, map type, three markers and whether or not a sensor (ie. GPS) is being used to determine the user’s current location.
Notice that the map is a static image and can be interacted with as such. You can save it to desktop and it will print with the rest of the page, unlike an iframe.
URL parameters
center: Specifies the center of the map using either a text string or a latitude/longitude value. This is required if no markers are specified. If there are markers and a center isn’t specified, then the location of the markers will determine the map’s center.
zoom: Sets the zoom level of the map.
size: Defines the size of the map in pixels.
scale: Defaults to a value of 1. If a value of 2 is set then twice the number of pixels are returned but the coverage area remains the same and the map image is resized to the value of the size parameter. This effectively doubles the map’s DPI and comes in handy if the map will be used for printing.
format: Determines the file format of the image file, defaulting to PNG8 if the parameter isn’t specified. Available formats: PNG8, PNG32, GIF, JPG.
maptype: Specifies the type of map. Available map types: roadmap, satellite, hybrid, terrain.
language: The language of the labels and text.
region: Display national borders. Specified by the country’s 2 character country-code top level domain (ccTLD).
markers: Defines one or more markers on the map. Each marker can have a color and a single letter label. The location of the markers can be specified as a text string or with a latitude/longitude value (as in the example above).
path: Adds one or more paths to the map, linking two or more locations on the map.
sensor: Determines whether or not the user’s device’s location tracking hardware (ie. GPS) is used to find the user’s location.
Street View
The Maps Image API can also produce static images from Google Street View. The syntax is slightly different.
http://maps.googleapis.com/maps/api/streetview?parametersThe available parameters include:
size: Defines the size of the image in pixels.
location: This can be a text string such as “CN Tower, Toronto, ON” or a latitude/longitude value. The camera will snap to the closest location with a valid Google Street View.
heading: Specifies the compass heading of the camera from 0 to 360 degrees, where 0 and 360 both indicate due North, 90 is West, 180 is South and 270 is West.
fov: Determines the zoom level. The default value is 90 and the maximum is 120.
pitch: Defines the vertical angle of the camera. The default value is 0 (flat/level) and 90 is straight up while -90 is straight down.
sensor: Specifies whether or not this location query came from a device that had a location sensor (ie. GPS). You can leave this to false but it’s a required parameter.
Here is an example Street View image of the CN Tower as viewed from the University of Toronto’s front campus.
This street view image uses the following URL
http://maps.googleapis.com/maps/api/streetview? size=600x300& location=43.661048,-79.394903& heading=160& fov=50& pitch=5& sensor=false
Caveats
quota exceeded image
While the API is completely free to use and anyone can use it without signing up for any accounts, there are a few limitations. The main catch is Google only allows up to 1000 queries per viewer per day. There is also an undisclosed request rate limit. If a viewer exceeds these limits, they will see a placeholder image instead of your map.
However, since these quotas are on a per viewer basis, it’s unlikely this will be a problem. If a user exceeds their limit, only the offending user is affected and all your other visitors continue to see the map just fine. The request rate limit also shouldn’t be a problem as the user’s browser will cache the image.
Further Reading
Official Google Image Maps API documentation: http://code.google.com/apis/maps/documentation/staticmaps/
Official Google Image Maps API Street View docs: http://code.google.com/apis/maps/documentation/streetview/
Google Maps API Family: http://code.google.com/apis/maps/
