Address Box Code

wnyc.addressbox.js

/////////
//
// Things you need in place to use this:
//  - have loaded jquery
//  - have called your google map "map" and declared it globally
//     such as: var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//  - have   <div id="address_module"></div>   where you want your address box
//  - call   addressBoxSetup();   in your $(document).ready(function(){ ... });
//
//
// By John Keefe john@johnkeefe.net ... provided without guarantee or warranty. 
// Free to use, copy, build on.
//
/////////


// Inserts the required form and go button onto the page in a self-contained table.
// Place it on the page using:  <div id='address_module'></div>
// Call it in $(document).ready(function(){ ... });
function insertAddressBox() { 

	$('#address_module').html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td id=\"zoombox\">Zoom to <input class=\"input\" id=\"address\" type=\"textbox\" style=\"width:100px;\" value=\"Address\" onkeydown=\"if (event.keyCode == 13) document.getElementById('geoButton').click()\"/></td><td><input class=\"button\" type=\"button\" id=\"geoButton\" value=\"GO\" onclick=\"codeAddress()\"> </td></tr> </table>");
	
	}


// This function keeps an eye on the geocode address box,
// removing the helpertext if it's being used;
// replacing it when it's not.
// No value expected.
// Call it in $(document).ready(function(){ ... });
function addressBoxHelptext() {
	
	// Watch the input box and clear it when highlighted
	$('#address').focus(function(){
	 if(this.value=='Address')
	 {
	 this.value=''
	 }
	});

	// if input box unhighlighted and empty, put back helper text
	$('#address').blur(function(){
	 if(this.value=='')
	 {
	 this.value='Address'
	 }
	});
	
}

// This function takes address found in the "address" form box and
// geocodes it. Then recenters & zooms the map and drops a marker 
// onto the geocoded location
// No value expected, though assumes form has id='address'.
function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
			map.setZoom(15);
			marker = new google.maps.Marker({
        map:map,
        draggable:false,
        animation: google.maps.Animation.DROP,
        position: results[0].geometry.location
      });
    } else {
      alert("Couldn't relocate for the following reason: " + status);
    }
  });
}

// This function gets called by $(document).ready(function(){ ... });
// to set up the box
function addressBoxSetup() {
	
	// first put the addressbox on the page
	insertAddressBox();
	
	// then set up the helpertext in it
	addressBoxHelptext();

}