Since the introduction of the Google Maps service in 2005, online maps have taken off in a way not really possible before the invention of slippy map interaction. Although quickly followed by a plethora of similar services from both commercial and non-commercial parties, Google’s first-mover advantage, and easy-to-use developer API saw Google Maps become pretty much the de facto mapping service.
It’s now so easy to add a map to a web page, there’s no reason not to. Dropping an
iframe map into your page is as simple as embedding a YouTube video.
That’s right, of course, and it got me thinking about what that two per cent means. For many sites, two per cent is the number of visitors using the Opera web browser, using IE6, or using Mobile Safari.
It’s progressive enhancement – also known as doing our jobs properly.
Sorry, wasn’t this about maps?
The Static Map API
The good news is that these tiles (or tiles just like them) can be used as regular images on your site. Google has a Static Map API which not only gives you a handy interface to retrieve a tile for the exact area you need, but also allows you to place pins, and zoom and centre the tile so that the image looks just so.
Here’s the how
Retrieving a static map tile is staggeringly easy – it’s just a case of forming a URL with the correct arguments and then using that as the
src of an image tag.
<img src="http://maps.google.com/maps/api/staticmap ?center=Bethlehem+Israel &zoom=5 &size=540x280 &maptype=satellite &markers=color:red|31.4211,35.1144 &sensor=false" width="540" height="280" alt="Map of Bethlehem, Israel" />
- center determines the point on which the map is centred. This can be latitude and longitude values, or simply an address which is then geocoded.
- zoom sets the zoom level.
- size is the pixel dimensions of the image you require.
- maptype can be
- markers sets one or more pin locations. Markers can be labelled, have different colours, and so on – there’s quite a lot of control available.
- sensor states whether you are using a sensor to determine the user’s location. When just embedding a map in a web page, set this to
There are many options, including plotting paths and setting the image format, which can all be found in the straightforward documentation.
Adding to your page
All you need to do is put your static image inside that container:
<div id="map"> <img src="http://maps.google.com/maps/api/staticmap[...]" /> </div>
Why not use a
About rate limits
The Google Static Map API limits the requests per site viewer – currently at one thousand distinct maps per day per viewer. So, for most sites you really don’t need to worry about the rate limit. Requests for the same tile aren’t normally counted, as the tile has already been generated and is cached. You can embed the images direct from Google and let it worry about the distribution and caching.