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:


<cfset key = "ABQIAAAAnKqaqda06cMGIKQ6i1ekrRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT2gB6zcbOMt6hlm0jA8TKTSu9K3g">
<cfset size = "400x400">
<cfset loc = "Lafayette, LA">
<cfset zoom = 13>
<cfset img = "http://maps.google.com/maps/api/staticmap?center=#urlEncodedFormat(loc)#&zoom=#zoom#&key=#urlEncodedFormat(key)#&sensor=false&size=#size#">

<cfset o = imageNew(img)>
<cfset imageWrite(o, expandPath("./mygooglemap.png"))>

<cfdocument format="pdf" name="mypdf">
<h1>Our Store!</h1>

<img src="/mygooglemap.png" align="right">
<p>
fjdsk lfjklsdjf jfkdk lfklsjkfl dskfd ksl fklfkl fklk lfkldsfklfk lsdfkljsdfkls
fjdsk lfjklsdjf jfkdkl fklsjkfl dskfd kslfklfklfklk lfkldsfklfk lsdfklj sdfkls
fjdsk lfjklsdjf jfkdklfklsjkfl dskfd ksl fklfklfklk lfkldsfklfk lsdfkljsdfkls
fjdsk lfjklsdjf jfkdklf klsjkfl dskfd kslfklfklfklk lfkldsfklfk lsd fkljsdfkls
fjdsk lfjklsdjf jfkdklfklsjkf l dskfd kslfklf klfklk lfkldsfklfk lsdfkljsdfkls
</p>

</cfdocument>

<cfset fileWrite(expandPath("./googlemap.pdf"), mypdf)>

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


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

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.)

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments