add state to controls

Add states to your controls so you can change them as the user causes the map to change.

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

 * The HomeControl adds a control to the map that
 * returns the user to the control\'s defined home.

 Define a property to hold the Home state
HomeControl.prototype.home_ = null;

 Define setters and getters for this property
HomeControl.prototype.getHome = function() {
  return this.home_;

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;

** @constructor *
function HomeControl(controlDiv, map, home) {

   We set up a variable for this since we\'re adding
   event listeners later.
  var control = this;

   Set the home property upon construction
  control.home_ = home;

   Set CSS styles for the DIV containing the control
   Setting padding to 5 px will offset the control
   from the edge of the map = \'5px\';

   Set CSS for the control border
  var goHomeUI = document.createElement(\'div\'); = \'white\'; = \'solid\'; = \'2px\'; = \'pointer\'; = \'center\';
  goHomeUI.title = \'Click to set the map to Home\';

   Set CSS for the control interior
  var goHomeText = document.createElement(\'div\'); = \'Arial,sans-serif\'; = \'12px\'; = \'4px\'; = \'4px\';
  goHomeText.innerHTML = \'Home\';

   Set CSS for the setHome control border
  var setHomeUI = document.createElement(\'div\'); = \'white\'; = \'solid\'; = \'2px\'; = \'pointer\'; = \'center\';
  setHomeUI.title = \'Click to set Home to the current center\';

   Set CSS for the control interior
  var setHomeText = document.createElement(\'div\'); = \'Arial,sans-serif\'; = \'12px\'; = \'4px\'; = \'4px\';
  setHomeText.innerHTML = \'Set Home\';

   Setup the click event listener for Home:
   simply set the map to the control\'s current home property.
  google.maps.event.addDomListener(goHomeUI, \'click\', function() {
    var currentHome = control.getHome();

   Setup the click event listener for Set Home:
   Set the control\'s home to the current Map center.
  google.maps.event.addDomListener(setHomeUI, \'click\', function() {
    var newHome = map.getCenter();

function initialize() {
  var mapDiv = document.getElementById(\'map-canvas\');
  var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  map = new google.maps.Map(mapDiv, mapOptions);

   Create the DIV to hold the control and
   call the HomeControl() constructor passing
   in this DIV.
  var homeControlDiv = document.createElement(\'div\');
  var homeControl = new HomeControl(homeControlDiv, map, chicago);

  homeControlDiv.index = 1;

google.maps.event.addDomListener(window, \'load\', initialize);