Google Maps: Events

There are two types of events:

• User events (such as "click" mouse events) are propagated from the DOM to the Google Maps API. These events are separate and distinct from standard DOM events.
• MVC state change notifications reflect changes in Maps API objects and are named using a property_changed convention

UI Events

Some objects within the Maps API are designed to respond to user events such as mouse or keyboard events. A google.maps.Marker object can listen to the following user events, for example:

• 'click'
• 'dblclick'
• 'mouseup'
• 'mousedown'
• 'mouseover'
• 'mouseout'

These events may look like standard DOM events, but they are actually part of the Maps API. Because different browsers implement different DOM event models, the Maps API provides these mechanisms to listen for and respond to DOM events without needing to handle the various cross-browser peculiarities. These events also typically pass arguments within the event noting some UI state (such as the mouse position).

MVC State Changes

MVC objects typically contain state. Whenever an object's property changes, the API will fire an event that the property has changed. For example, the API will fire a zoom_changed event on a map when the map's zoom level changes. You can intercept these state changes by registering addListener() event handlers on the event namespace method as well.

User events and MVC state changes may look similar, but you generally wish to treat them differently in your code. MVC events, for example, do not pass arguments within their event. You will want to inspect the property that changed on an MVC state change by calling the appropriate getProperty method on that object.

Event Handling = Register a JavaScript event listener

Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by registering addListener() event handlers on the google.maps.event namespace.

For a complete list of events, consult the Maps API Reference. Events are listed in a separate section for each object which contains events.

Example: Handling Events

The following code mixes user events with state change events. We attach an event handler to a marker that zooms the map when clicked. We also add an event handler to the map for changes to the 'zoom' property and move the map to Darwin, Northern Territory, Australia on receipt of the zoom_changed event:

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToDarwin, 3000);
  });
  
  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map,
      title:"Hello World!"
  });
  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
  });
}
  
function moveToDarwin() {
  var darwin = new google.maps.LatLng(-12.461334, 130.841904);
  map.setCenter(darwin);
}

TRY it ( and the complete code)