Simple Static Maps API, similar to Google Charts
I’ve been subscribed to the 24 ways feed again this year. They’ve had some really interesting stuff I might make use of sometime such as the Javascript Internationalisation and Neverending Background Image articles. Today’s article on the new Google Charts API reminded me of something I thought of last week when the Charts API launched. Multimap have recently launched a new way of accessing their maps API which I think is actually pretty similar to the Google Charts API in some ways. The new static maps API is an incredibly simple way to insert a map onto your pages without having to write any actual code, it allows you to put maps on pages that you don’t expect your users to hang around on for long and they’re great for using with mobile devices.
The Multimap Static Maps API is similar to the Charts API because to get a map all you need to do is put some parameters on a URL, you can get a map with a single qs=[postcode]
parameter. A big difference is that you do have to sign up for an API key. This isn’t too difficult though, you’ll need to register for “My Multimap” then head over to the Open API Signup page to get your key. Once you’ve done that you can use this key to access the JavaScript API as well as the new Static API. You also must provide a link on your page to the terms of use.
So, let’s get cracking shall we? Here’s a map featuring Multimap’s office on Fleet Street in London, the postcode for it is EC4A 2DY so I’ll just use that:
http://developer.multimap.com/API/map/1.2/[api_key]?qs=EC4A+2DY
If I’m going to give you lots of examples, I should probably trim that image down a bit, maybe make it a bit wider, but shorter. I think I’ll also change the label on the marker, in fact I’ll just get rid of it for now, how does this look?
http://developer.multimap.com/API/map/1.2/[api_key]?qs=EC4A+2DY&width;=450&height;=300&label;=+
When passing in geocode search parameters or marker labels be sure to URL encode the strings, the Javascript function encodeURIComponent
is good for that. Also note that I passed a single space into my marker to give it a blank label.
I think it would be good to display some landmarks on the map too so that you have an idea of whereabouts Fleet Street is in relation to, say, Saint Paul’s cathedral, Buckingham Palace, The Houses of Parliament and the London Eye, so how’s this:
http://developer.multimap.com/API/map/1.2/[api_key]?width=450&height;=300&labels;=+,1,2⪫_1=51.51428&lon;_1=-0.10823⪫_2=51.51373&lon;_2=-0.09901⪫_3=51.50182&lon;_3=-0.14061⪫_4=51.49917&lon;_4=-0.125⪫_5=51.50383&lon;_5=-0.11972
-
Multimap’s Office, Fleet Street
-
Saint Paul’s Cathedral
-
Buckingham Palace
-
Houses of Parliament
-
London Eye
This is all very UK-centric though and it would be a shame to ignore the great mapping that Multimap provides around the world, so how about we do a bit of shopping in New York? We’ll hit a few of the big shops first then head somewhere a little more affordable to get a few things for ourselves:
http://developer.multimap.com/API/map/1.2/[api_key]?width=450&height;=300⪫_1=40.74982&lon;_1=-73.98954⪫_2=40.76221&lon;_2=-73.96821⪫_3=40.76266&lon;_3=-73.97395⪫_4=40.74225&lon;_4=-74.00426⪫_5=40.73986&lon;_5=-73.99497
-
Macy*s Department Store
-
Bloomingdales
-
Tiffany
-
The new Apple Store
-
Old Navy
And finally to get things even more international how about all the places I’m lucky enough to have travelled to this year (largely due to weddings/honeymoon):
http://developer.multimap.com/API/map/1.2/[api_key]?width=450&height;=300&qs;_1=Liverpool⪫_1=53.41667&lon;_1=-3⪫_2=9.4759&lon;_2=99.9566⪫_3=22.32341&lon;_3=114.21175⪫_4=39.9045&lon;_4=116.391⪫_5=36.71963&lon;_5=-4.41991⪫_6=41.066&lon;_6=29.0061
These are just some of the things you can do with the static maps module, take a look at the full documentation for more examples. I’m hoping that we’ll get quite a few people using this, it’s a really good way of getting a map onto a page without requiring the larger payload of a full JS API. If you do make something then why not put a comment on this page, maybe you could do a map of all the places you’ve been in 2007?
Technorati tags: staticmap, charts, google, multimap, map, api
Comments
— Thom Shannon