Google Maps API for Flash Controls

Map Controls Overview

The maps on http://maps.google.com contain UI elements for allowing user interaction through the map. These elements are known as controls and you can include various combinations of these controls in your Google Maps API for Flash application.

Maps API for Flash comes with a handful of built-in controls you can use in your maps:

• PositionControl - a pan control as used on Google Maps. Appears in the top left corner of the map by default.
• ZoomControl - a zoom control slider as used on Google Maps.
• MapTypeControl - buttons that let the user toggle between map types (such as Map and Satellite).
• ScaleControl - a scale control is a visual indicator used to indicate the resolution of the current map and zoom level.
• OverviewMapControl - a collapsible overview map in the corner of the screen.

All of these controls implement the IControl interface. You can also build your own custom controls by subclassing the ControlBase class (which provides implementations not provided in the interface).

Adding Controls to the Map

You add controls to the map with the Map method addControl(). For example, to add the panning control you see on Google Maps to your map, you would include the following line in your map initialization:

map.addControl(new PositionControl());

You can add multiple controls to a map. In this case, we add the built-in ZoomControl, PositionControl, and MapTypeControl controls, which let us pan/zoom the map and change between different map types. The standard controls are fully operational once they are included on a map.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(42.366662,-71.106262), 11, MapType.NORMAL_MAP_TYPE);
  map.addControl(new ZoomControl());
  map.addControl(new PositionControl());
  map.addControl(new MapTypeControl());
}

View example (ControlSimple.html)

Vuew Source (ControlSimple.mxml)

Configuring Standard Controls

Some controls (such as the MapTypeControl) are configurable. For example, by default, the Google Maps API provides four map types: NORMAL_MAP_TYPE, SATELLITE_MAP_TYPE, HYBRID_MAP_TYPE, and PHYSICAL_MAP_TYPE. You may alter the map types available to a map by removing existing types via Map.removeMapType() or adding them via Map.addMapType(). Whenever you create a map type control, it uses the currently attached map types and makes them available via the control.

The code below removes HYBRID_MAP_TYPE from the available map types attached to a map, leaving only three map types. Once we add the MapTypeControl, only those three map types are available.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(42.366662,-71.106262), 11, MapType.NORMAL_MAP_TYPE);
  map.removeMapType(MapType.HYBRID_MAP_TYPE);
  map.addControl(new MapTypeControl());
}

View example (ControlMapTypes.html)

Vuew Source (ControlMapTypes.mxml)

Positioning Controls on the Map

The setControlPosition() method takes a ControlPosition parameter that lets you specify the position of the control on your map. This value can be one of the following values, each specifying a corner of the map in which to place the control:

• ANCHOR_TOP_RIGHT
• ANCHOR_TOP_LEFT
• ANCHOR_BOTTOM_RIGHT
• ANCHOR_BOTTOM_LEFT

If this argument is excluded, the Google Maps API for Flash uses the default position specified by the control.

The ControlPosition may optionally specify an offset indicating how many pixels from the edge of the map to place the control. These offsets are specified using optional x,y values where x specifies a horizontal offset while y specifies a vertical offset.

This example adds the MapTypeControl to the top right corner of the map with 16 pixels of horizontal padding and 10 pixels of vertical padding.

private function onMapReady(event:MapEvent):void {
  map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
 
  var bottomRight:ControlPosition = new ControlPosition(ControlPosition.ANCHOR_BOTTOM_RIGHT, 16, 10);
  var myMapTypeControl:MapTypeControl = new MapTypeControl();
  myMapTypeControl.setControlPosition(bottomRight);  
  map.addControl(myMapTypeControl);
}

View example (ControlPositioning.html)

View Source (ControlPositioning.mxml)

See the ControlPosition class reference for more information.

Custom Map Controls

The Google Maps API also allows you to create custom map controls by subclassing ControlBase class.

To create a usable custom control, you are required to override the ControlBase's initControlWithMap() method. You will need to call the superclass' method from within this overridden method. You should also specify a ControlPosition in the control's constructor.

In this example, we create a simple zoom control that has textual links rather than the graphical icons used in the standard Google Maps zoom control.

public class ControlTextualZoom extends ControlBase {
	 
  public function ControlTextualZoom() {
    // Control will be placed at the top left corner of the map,
    // 7 pixels from the edges.
    super(new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 7, 7));
  }
  
  public override function initControlWithMap(map:IMap):void {
	// first call the base class
	super.initControlWithMap(map);
    createButton("Zoom in", 0, 0, function(event:Event):void { map.zoomIn(); });
    createButton("Zoom out", 0, 20, function(event:Event):void { map.zoomOut(); });
  }
	
  private function createButton(text:String,x:Number,y:Number,callback:Function):void {
    var button:Sprite = new Sprite();
    button.x = x;
    button.y = y;
		
    var label:TextField = new TextField();
    label.text = text;
    label.x = 2;
    label.selectable = false;
    label.autoSize = TextFieldAutoSize.CENTER;
    var format:TextFormat = new TextFormat("Verdana");
    label.setTextFormat(format);
      
	var buttonWidth:Number = 100;
    var background:Shape = new Shape();
    background.graphics.beginFill(0xFFFFFF);
    background.graphics.lineStyle(1, 0x000000);
    background.graphics.drawRoundRect(0, 0, buttonWidth, 18, 4);
    background.graphics.endFill();

    button.addChild(background);
    button.addChild(label);
    button.addEventListener(MouseEvent.CLICK, callback);
		
    addChild(button);
  }
}

View example (ControlCustom.html)

View Source (TextualZoomControl.as)