Includes enterprise licensing and support
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.
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)
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)
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);
}