Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Address Box Code
/////////
//
// 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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment