Event Listeners

The AGMap object that you have exports a number of events such as click, dblclick, mouseover, etc. For each event, you can pass any objects within a given context.

For example, the mousemove event fires when the user moves the mouse within a map object, and passes the AGCoord of the geographic location in which the mouse is located.

For a complete list of AGMap events and the objects they generate, see API Reference.

You can use AGEvent.addListener() to register for an event which takes an object, an event to listen for, and a function to call when the specified event occurs.
For example, this code executes an alert every time when the user clicks on the map.

var agmap = new AGMap(document.getElementById("MapPanel"));
agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);
AGEvent.addListener(agmap,"onclick", function(){
    alert("You clicked the map.");
});

Using Closures in Event Listeners

The following example uses a function closure in the event listener to assign a secret message to a set of markers. Clicking on each marker will review a portion of the secret message, which is not contained within the marker itself.

var agmap = new AGMap(document.getElementById("MapPanel"));
agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);

var bounds = agmap.getBoundingBox();

var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();                
var lngSpan = northEast.longitude() - southWest.longitude();
var latSpan = northEast.latitude() - southWest.latitude();

for (var i = 0; i < 5; i++) 
{
    var coord = new AGCoord(southWest.latitude() + latSpan * Math.random(),southWest.longitude() + lngSpan * Math.random());
    var oMarker = new AGMarker(coord);
    agmap.addOverlay(oMarker);	                
    oMarker.bindInfoDisplayHTML("#Marker"+i);
}

Passing Objects in Events

Many events in the Maps API event system pass objects when the event is triggered.
For example, the AGMap "click" event passes an overlay and overlaycoord if the map click occurs on an overlay; otherwise, it passes a coord of the map coordinate.

In the example below, we first test to ensure whether the click was on a marker or not. If so, we open an info window above the clicked coordinate and display the coordinate converted to pixel.

var agmap = new AGMap(document.getElementById("MapPanel"));
agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);

var defaultMarkerOption = new AGMarkerOptions();
defaultMarkerOption.draggable = true;
	
var oCoord = new AGCoord(-25.7482681, 28.2259351);
var oMarker = new AGMarker(oCoord,defaultMarkerOption);

agmap.addOverlay(oMarker);
AGEvent.bind(oMarker,"onclick",oMarker,function(oCoord){
        alert(oCoord.latitude()+","+oCoord.longitude());
});

You can easily remove any bind object using AGEvent.removeListener() method and clear all events containing that object using AGEvent.clearListeners() method.

Event Classes:

   var agmap = null; //declare a global map object
   var eventListener = null;
   
   function initAGMap() {
      agmap = new AGMap(document.getElementById("MapPanel"));
      agmap.centreAndScale(new AGCoord(-25.7482681, 28.2259351), 12);
      eventListener = AGEvent.addListener(agmap, "onclick", mapClickHandler);
      AGEvent.bind(agmap, "onmouseover", agmap, mapMouseOver);
   }

   function mapClickHandler(oPointClicked) {
      alert("You clicked the map");
   }
             
   function removeEventHandler() {
      AGEvent.removeListener(eventListener);
   }

   function mapMouseOver() {
      alert("You have moused over the map");
   }

   function clearEvents() {
      AGEvent.clearListeners(agmap, "onmouseover");
   }