Google Maps API for Flash (Deprecated)

Google Maps API for Flash Events

Map Events Overview

ActionScript within SWF files is event driven, meaning that ActionScript responds to interactions by generating events, and expects a program to listen to interesting events. For example, within a Flash file, user mouse and keyboard interactions create events that propagate throughout the Flash UI. Events may also be generated internally by the system when a state change occurs. Programs interested in certain events will register ActionScript event listeners for those events and execute code when those events are received.

Generally, UI events within Flash bubble up from leaf "targets" up to the container objects, triggering events throughout the chain of objects. A click on a DisplayObject, for example, may trigger an event MouseEvent.MOUSE_DOWN on that object, and then pass that event up the hierarchy to any containing elements.

The Google Maps API for Flash adds to this event model by defining custom events for objects within the API. It is important to note that the Maps API for Flash events are separate and distinct from the standard Flash events. Note that MapEvent events may bubble up from target objects to container objects, though events in the Google Maps API for Flash are generally designed with specific targets in mind.

Event Listeners

Events in the Google Maps API for Flash are defined within specific classes (such as MapEvent) that contain an enumeration of all events specific to the Maps API for Flash. Some of these events are UI events, while others are related to state changes of the Maps API environment itself. Some events are designed with a specific object in mind. For example, a MapEvent.MAP_READY event is triggered when the map object initializes and is ready to receive commands. This event should only be handled by a Map object.

Other events are applicable to a wide variety of objects. For example, the MapMouseEvent CLICK, DOUBLE_CLICK, and DRAG_STEP events may be attached to Map objects or overlays, and may require different actions depending on the object receiving the event.

For a complete list of map event constants, see the MapEvent, MapMouseEvent and MapMoveEvent reference documentation.

To register for notification of these events, use the Map.addEventListener() method. This method takes as arguments an event name and a function to call when the specified event occurs. For example, this code snippet displays an InfoWindow every time the user clicks on the map:

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
  map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}
	
private function onMapClick(event:MapMouseEvent):void {
  map.openInfoWindow(event.latLng, 
    new InfoWindowOptions({title: "Click Event", content: "You clicked the map!"}));
}  

View example (EventSimple.html)

View Source (EventSimple.mxml)

Listeners are also able to determine the context of the event. In the following example code, we display the latitude and longitude of the center of the map after the user drags the map.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
  map.addEventListener(MapMoveEvent.MOVE_END, onMapMoveEnd);
}

private function onMapMoveEnd(event:MapMoveEvent):void {
  var center:LatLng = getCenter();
  map.openInfoWindow(getCenter(),
    new InfoWindowOptions({title: "Move Event", content: "MOVE_END generated on Map"}));
}

View example (EventContext.html)

View Source (EventContext.mxml)

Using Closures in Event Listeners

When executing an event listener, it is often advantageous to have both private and persistent data attached to an object. ActionScript supports closures which allows inner functions to access outer variables. Closures are useful within event listeners to access variables not normally attached to the objects on which events occur.

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.

private var message:Array = ["This","is","the","secret","message"];

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
  
  // Add 5 markers to the map at random locations
  // Note that we don't add the secret message to the marker's instance data
  var bounds:LatLngBounds = getLatLngBounds();
  var southWest:LatLng = bounds.getSouthWest();
  var northEast:LatLng = bounds.getNorthEast();
  var lngSpan:Number = northEast.lng() - southWest.lng();
  var latSpan:Number = northEast.lat() - southWest.lat();
  for (var i:Number = 0; i < 5; i++) {
    var latlng:LatLng = new LatLng(southWest.lat() + latSpan * Math.random(),
			southWest.lng() + lngSpan * Math.random());
	map.addOverlay(createMarker(latlng, i + 1));
  }
}

// Creates a marker at the given point
// Clicking the marker will hide it
private function createMarker(latlng:LatLng, number:Number):Marker {
  var marker:Marker = new Marker(latlng);
  marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
    var myTitle:String = "<b>#" + number + "</b>";
    var myContent:String = message[number -1];
    map.openInfoWindow(latlng, new InfoWindowOptions({titleHTML: myTitle, contentHTML: myContent}));
  });
  return marker;
}

View example (EventClosure.html)

View Source (EventClosure.mxml)

Removing Event Listeners

When an event listener is no longer needed, you should remove it. The following example responds to a click by placing a marker on the map and then removing the event listener immediately. Notice that you can remove an event listener even from within the event listener itself.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
  map.addEventListener(MapMouseEvent.CLICK, onMapClick);
}

private function onMapClick(event:MapMouseEvent):void {
  map.openInfoWindow(getCenter(), 
    new InfoWindowOptions({title: "Click Event", content: "You clicked the Map!"}));
  var marker:Marker = new Marker(getCenter());
  map.addOverlay(marker);
  map.removeEventListener(MapMouseEvent.CLICK, onMapClick);
}

View example (EventRemoval.html)

View Source (EventRemoval.mxml)

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.