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 = \'5px\';

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

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

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


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;

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