custom controls

Customize the map controls.

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

**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 * @constructor
 *
function HomeControl(controlDiv, map) {

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

   Set CSS for the control border
  var controlUI = document.createElement(\'div\');
  controlUI.style.backgroundColor = \'white\';
  controlUI.style.borderStyle = \'solid\';
  controlUI.style.borderWidth = \'2px\';
  controlUI.style.cursor = \'pointer\';
  controlUI.style.textAlign = \'center\';
  controlUI.title = \'Click to set the map to Home\';
  controlDiv.appendChild(controlUI);

   Set CSS for the control interior
  var controlText = document.createElement(\'div\');
  controlText.style.fontFamily = \'Arial,sans-serif\';
  controlText.style.fontSize = \'12px\';
  controlText.style.paddingLeft = \'4px\';
  controlText.style.paddingRight = \'4px\';
  controlText.innerHTML = \'Home\';
  controlUI.appendChild(controlText);

   Setup the click event listeners: simply set the map to
   Chicago
  google.maps.event.addDomListener(controlUI, \'click\', function() {
    map.setCenter(chicago)
  });

}

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);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

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