Google's Static Map API

I discovered something cool today - Google has a "Static" Maps API. What is that exactly? While Google Maps is very powerful, it requires the use of JavaScript. For simple maps, or for embedding maps into PDFs, you can't use regular Google Maps. This gets around it. The API is a simple URL based service that returns the image in binary form. So for example, to create a map for my area, I'd use this URL:

http://maps.google.com/maps/api/staticmap?center=Lafayette%2C%20LA&zoom=13&key=ABQIAAAAnKqaqda06cMGIKQ6i1ekrRT2yXp%5FZAY8%5FufC3CFXhHIE1NvwkxT2gB6zcbOMt6hlm0jA8TKTSu9K3g&sensor=false&size=400x400

Which produces:

The URL contains multiple arguments. You can see the address, the zoom, a size, and, yes, my Google Maps key. But since I only use it for localhost I'm not too worried about it. The docs contain the full API and demonstrate how you can even use markers and overlays on the maps.

I tried a PDF version and noticed something odd. Whenever I embedded the URL directly in the PDF, it failed. If I fetched the image and save it first, it worked fine, like in the example below:

view plain print about

1<cfset key = "ABQIAAAAnKqaqda06cMGIKQ6i1ekrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT2gB6zcbOMt6hlm0jA8TKTSu9K3g">
2<cfset size = "400x400">
3<cfset loc = "Lafayette, LA">
4<cfset zoom = 13>
5<cfset img = "http://maps.google.com/maps/api/staticmap?center=#urlEncodedFormat(loc)#&zoom=#zoom#&key=#urlEncodedFormat(key)#&sensor=false&size=#size#">
6
7<cfset o = imageNew(img)>
8<cfset imageWrite(o, expandPath("./mygooglemap.png"))>
9
10<cfdocument format="pdf" name="mypdf">
11<h1>Our Store!</h1>
12
13<img src="/mygooglemap.png" align="right">
14<p>
15fjdsk lfjklsdjf jfkdk lfklsjkfl dskfd ksl fklfkl fklk lfkldsfklfk lsdfkljsdfkls
16fjdsk lfjklsdjf jfkdkl fklsjkfl dskfd kslfklfklfklk lfkldsfklfk lsdfklj sdfkls
17fjdsk lfjklsdjf jfkdklfklsjkfl dskfd ksl fklfklfklk lfkldsfklfk lsdfkljsdfkls
18fjdsk lfjklsdjf jfkdklf klsjkfl dskfd kslfklfklfklk lfkldsfklfk lsd fkljsdfkls
19fjdsk lfjklsdjf jfkdklfklsjkf l dskfd kslfklf klfklk lfkldsfklfk lsdfkljsdfkls
20</p>
21
22</cfdocument>
23
24<cfset fileWrite(expandPath("./googlemap.pdf"), mypdf)>

I even whipped up a quick UDF to make it simpler to use:

view plain print about

1function getStaticMap(string key, string address, string size, numeric zoom) {
2 return "http://maps.google.com/maps/api/staticmap?center=#urlEncodedFormat(arguments.address)#&zoom=#arguments.zoom#&key=#urlEncodedFormat(arguments.key)#&sensor=false&size=#arguments.size#";
3}

Anyway, there is a lot more to the API, but for those looking for maps you can store offline, or embed in PDFs, then this looks a great resource. (Oh, and let me bitch a bit a little bit here. I really wish the main Google Maps API would let you pass in an address instead of making you have to perform a geolocation request first. It seems silly that I'd need to make 2 HTTP requests for a map when Google should let me just pass the address in the initial map setup request.)

Creating map previews with jQuery and Google's Static Map API (January 5, 2011)

Comments

[Add Comment] [Subscribe to Comments]

Todd Sharp said on 02-04-2010 at 10:00 PM #
	I just found this last week myself. FWIW I found that it would serve the map even without passing the API key in the URL.

Leigh said on 02-04-2010 at 10:00 PM #
	I agree on the 2 HTTP requests which we have to make, seems really redundant and slow things down.

Scott P said on 02-04-2010 at 10:10 PM #
	beats the hell out of my apple-shift-4 method

PaulH said on 02-04-2010 at 10:42 PM #
	yeah not being able to use the map image directly in creating a PDF is a pain. any idea who to blame?

Anooj said on 02-04-2010 at 11:33 PM #
	I too read the same yesterday on Static Maps API from google. Decent idea, just to have the location shown in the map as image rather than loading the complete package of js . this is cool. Will try your UDF as well, thanks.

Raymond Camden said on 02-05-2010 at 6:56 AM #

Paul - if I had to guess why it failed in cfdocument I'd say it was the user agent used to generate the HTML page by the Java package. I can't remember the package offhand (Jason Delmore talked about it recently, it is way old), but if it uses a specific User Agent, Google may blog it. Of course, using imageNew(url) works, so Google isn't blocking the ColdFusion user agent.

Actually - I wonder what the UA is for image requests. I know for CFHTTP it defaults to "ColdFusion something", but it may not for imageNew(). I'll test that today.

PaulH said on 02-05-2010 at 8:54 AM #
	ray, a plain cfhttp call works fine just silently fails if within a cfdocument block. i tried (if i remember correctly) various agents, cfsavecontent, etc. only writing out the image worked, which is a pretty messy way to handle this (for a reporting functionality).

Raymond Camden said on 02-05-2010 at 8:58 AM #
	Weird. I mean, you can use external URLs in cfdocument, so it should work. As an FYI, I tested logging the user agent for imageNew(url), and it is Java/1.6.0_17. Obviously that would be different for your own JDK.

Ben Nadel said on 02-05-2010 at 3:20 PM #
	Very cool! I didn't know about this at all. Great find.

Geoff Bowers said on 02-07-2010 at 4:33 PM #
	Static Maps are also targeted at the mobile device market where JS in the browser is not always available. Google did a great presentation at webdu 2009: Fast Maps with the Google Static Maps API Podcast: http://webdu.com.au/session/feeditunes

Bill Downs said on 02-08-2010 at 4:35 PM #
	I've been using Google static maps for awhile now to make a printable PDF that serves as a mini brochure. I pull the map image in from google and generate a pdf. Seems to work fine.

[Add Comment] [Subscribe to Comments]