Creating map previews with jQuery and Google's Static Map API

This post is more than 2 years old.

I've blogged before about Google's Static Map API (see the related blog entries below). Essentially it is a simple way to quickly embed maps on your site by just using query parameters. While not as powerful as the "real" JavaScript Map API, it's a darn nice feature and about as simple to use as you can get. Today on a phone conversation I mentioned how this API could be used to provide previews for address information. Take for example the maps page for Adobe Groups. This is driven by address information entered by user group managers. It would be cool if we could provide a way for the UGMs to see exactly where on the map their address will fall. Here is a quick and dirty I whipped up with jQuery.


<head> <script type="text/javascript" src=""></script> <script> $(document).ready(function() { var baseURL = "";

$("#address").keyup(function() {
	var address = $(this).val();
	if(address.length &lt; 5) $("#mapPreview").attr("src", "spacer.gif");
	else $("#mapPreview").attr("src", baseURL + escape(address));

}) </script>



<p> Enter your address:<br/> <textarea cols="30" rows="2" id="address"></textarea> </p>

<p> <img src="spacer.gif" id="mapPreview" width="400" height="400" title="Map Preview"> </p>

</body> </html>

So let's start at the bottom. I've got a simple form with a textarea. This is where you enter your address. Below that is an img tag that will store the preview. Now let's go up to the JavaScript.

I begin by creating a bind to "keyup" event on the textarea. I get the value, and if it is too short (I chose less than five after many hours of research - really) we set the image's source to a blank image. If not, we point to the static map API and pass your value as the address. Try it below.

For an interesting test, try typing "lafayette, la", then remove the "la" and change it to "in".

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, 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

Archived Comments

Comment 1 by Matt Graf posted on 1/6/2011 at 8:44 PM

Very nice Ray. I love how simple jQuery makes things for us.

Comment 2 by Phillip Senn posted on 1/7/2011 at 11:48 AM

Zort! Are you pondering what I'm pondering?

Comment 3 by Raymond Camden posted on 1/7/2011 at 5:15 PM

As I have no idea what you mean - probably not. ;)

Comment 4 by RenĂª Dettenborn posted on 3/6/2011 at 11:02 AM

Thanks! Save my time!