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="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var baseURL = "http://maps.google.com/maps/api/staticmap?zoom=12&size=400x400&maptype=roadmap&sensor=false¢er="; $("#address").keyup(function() {
var address = $(this).val();
if(address.length < 5) $("#mapPreview").attr("src", "spacer.gif");
else $("#mapPreview").attr("src", baseURL + escape(address));
});
})
</script> </head> <body> <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>
<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".