Each section below contains an individual Flash demo application for you to use. It includes full source code, which you can cut and paste into Flex Builder, and follow the instructions below. Adobe also offers a free development kit which lets you build apps from the command line.

The link below each demo's source code takes you to an online demo of the application.

The steps below describe how to build the application in Flex Builder 3:

  • Start Flex Builder 3
  • From within Flex Builder, select File -> New -> ActionScript Project
  • Project Name: eg. HelloMap
  • Project Contents: ..... / HelloMap (If HelloMap folder doesn't exist, click Browse... and create the folder)
  • Click Next >
  • Click Library Path
  • Click Add SWC...
  • Add map_1_18.swc, the Google Maps API for Flash component, which you can download from here
  • For the last two examples, download sdb2.swc, the Spatial DataBox component.
  • Click Finish

Flex Builder should have created the project and a skeleton as file, with some sample code. Delete all of this sample code and replace it with all of the code from one of the demos below. Then save and run your demo. It's as simple as that!

Note: If you plan to host the map externally, don't forget to assign an appropriate value to map.key =.

A Simple Map to Get You Started!


package {


import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.geom.Point;


import com.google.maps.LatLng;

import com.google.maps.Map;

import com.google.maps.MapEvent;

import com.google.maps.MapOptions;

import com.google.maps.controls.MapTypeControl;

import com.google.maps.controls.NavigationControl;

import com.google.maps.extras.rubberbandctrl.RubberBandCtrl;


/**

 * The HelloMap class is a simple application that demonstrates a few concepts:

 * 1. How to build a Google Map entirely from ActionScript 3 code

 * 2. The use of the Preinitialize event to set the map's zoom and center.

 * 3. Addition of built-in map controls.

 * 4. Addition of Rubber band map control. This is a third-party control that

 * provides more control over map navigation / pan / zoom, and can be downloaded

 * from "http://code.google.com/p/gmaps-utility-library-flash".

 */

public class HelloMap extends Sprite

{


public function HelloMap ()

{

// POSITION AND SCALE MAP FRAME WITHIN BROWSER WINDOW

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE;


// REQUIRED MAP CONFIGURATION

map.key = " .. your API key goes here .. ";

map.setSize (new Point (900, 600));

// BUILT-IN MAP CONTROLS

map.addControl (new MapTypeControl ());

map.addControl (new NavigationControl ());


// REGISTER LISTENERS THAT WILL PERFORM MAP INITIALIZATION

map.addEventListener (MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);

map.addEventListener (MapEvent.MAP_READY, onMapReady);

// MAKE THE MAP VISIBLE

addChild (map);

}


public function onMapPreinitialize (event:MapEvent):void

{

map.setInitOptions (

new MapOptions ( {

center: new LatLng (40,-90),

zoom: 4

}

));

}


public function onMapReady (event:MapEvent):void

{

// INITIALIZE RUBBER BAND CONTROL

rbCtrl.enable (map);

rbCtrl.setPanIncrement (250);

}


private const map:Map = new Map ();

private const rbCtrl:RubberBandCtrl = new RubberBandCtrl ();


}


}

» Run HelloMap...

Map Expands to Occupy Your Entire Monitor


package {


import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.events.FullScreenEvent;

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.geom.Rectangle;


import com.google.maps.LatLng;

import com.google.maps.Map;

import com.google.maps.MapEvent;

import com.google.maps.MapOptions;

import com.google.maps.controls.MapTypeControl;

import com.google.maps.controls.NavigationControl;

import com.google.maps.extras.rubberbandctrl.RubberBandCtrl;


/**

 * The FullScreenMap class is an application that demonstrates how to enable and

 * support full-screen map view.

 * 

 * This class also demonstrates a few other concepts:

 * 1. How to build a Google Map entirely from ActionScript 3 code

 * 2. The use of the Preinitialize event to set the map's zoom and center.

 * 3. Addition of built-in map controls.

 * 4. Addition of Rubber band map control. This is a third-party control that

 * provides more control over map navigation / pan / zoom, and can be downloaded

 * from "http://code.google.com/p/gmaps-utility-library-flash".

 */

public class FullScreenMap extends Sprite

{


public function FullScreenMap ()

{

// POSITION AND SCALE MAP FRAME WITHIN BROWSER WINDOW

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE;


// REQUIRED MAP CONFIGURATION

map.key = " .. your API key goes here .. ";

map.setSize (DEFAULT_SCREEN_SIZE);

// BUILT-IN MAP CONTROLS

map.addControl (new MapTypeControl ());

map.addControl (new NavigationControl ());


// REGISTER LISTENERS THAT WILL PERFORM MAP INITIALIZATION

map.addEventListener (MapEvent.MAP_PREINITIALIZE, onMapPreinitialize);

map.addEventListener (MapEvent.MAP_READY, onMapReady);

// MAKE THE MAP VISIBLE

addChild (map);

}


public function onMapPreinitialize (event:MapEvent):void

{

map.setInitOptions (

new MapOptions ( {

center: new LatLng (40,-90),

zoom: 4

}

));

}


public function onMapReady (event:MapEvent):void

{

// INITIALIZE RUBBER BAND CONTROL

rbCtrl.enable (map);

rbCtrl.setPanIncrement (250);

// LISTEN FOR FULL-SCREEN RELATED EVENTS

addEventListener (MouseEvent.CLICK, toggleFullScreen);

stage.addEventListener (FullScreenEvent.FULL_SCREEN, onFullScreen);

}


private function toggleFullScreen (event:Event):void

{

if (isFullScreenMode) {

return;

}

stage.fullScreenSourceRect = new Rectangle (0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

stage.displayState = "fullScreen";

}


private function onFullScreen (e:FullScreenEvent):void

{

if (e.fullScreen) {

map.setSize (new Point (stage.fullScreenWidth, stage.fullScreenHeight));

} else {

map.setSize (DEFAULT_SCREEN_SIZE);

}

isFullScreenMode = e.fullScreen;

}


private static const DEFAULT_SCREEN_SIZE:Point = new Point (900, 600);


private const map:Map = new Map ();

private const rbCtrl:RubberBandCtrl = new RubberBandCtrl ();


private var isFullScreenMode:Boolean = false;


}


}



Also, you'll have to set 'allowFullScreen' to 'true' in the accompanying html file. You can view the source of this html file for an example.

» Run FullScreenMap...

Map Queries Spatial Databox for Starbucks Stores

package {

import com.google.maps.*;
import com.google.maps.controls.*;
import com.google.maps.overlays.*;
import com.spatialdatabox.query.*;
import com.spatialdatabox.util.*;

import flash.display.*;
import flash.geom.*;

public class SDB_Map extends Sprite implements IResultSetListener
{

private static const DEFAULT_SCREEN_SIZE:Point = new Point (600, 600);
private const map:Map = new Map ();

private static const MAP_CENTER:LatLng = new LatLng (43.3, -79.8);
private static const QUERY_RADIUS_DEG:Number = 0.2;

//  Interface to SDB2
private var query:Query = null;

public function SDB_Map ()
{
  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;

  map.key = " .. your API key goes here .. ";
  map.setSize (DEFAULT_SCREEN_SIZE);
  map.addControl (new PositionControl ());
  map.addControl (new ZoomControl ());
  map.addControl (new MapTypeControl ());
  map.addControl (new OverviewMapControl ());
  map.addEventListener (MapEvent.MAP_READY, onMapReady);

  addChild (map);
}

public function onMapReady(event:MapEvent):void
{
  //  CENTER MAP
  map.setCenter (MAP_CENTER);
  map.setZoom (10);

  //  SUBMIT QUERY TO SDB

  Query.setOverrideDomainName ("http://spatialdatabox.com/");
  query = new Query (map);

  const swLatLng:LatLng = new LatLng (MAP_CENTER.lat () - QUERY_RADIUS_DEG, MAP_CENTER.lng () - QUERY_RADIUS_DEG);
  const neLatLng:LatLng = new LatLng (MAP_CENTER.lat () + QUERY_RADIUS_DEG, MAP_CENTER.lng () + QUERY_RADIUS_DEG);

  const args:Object = {
      layerName: "sbux",
      bbox: new LatLngBounds (swLatLng, neLatLng),
      projection: "id,latitude,longitude,name,street,address",
      secondaryCond: null
  };

  try {
  query.submitFirst (this, args);
  } catch (e:Error) {
    com.spatialdatabox.util.Log.msg ("querySDB failed with exception: " + e.message);
  }

}

//  Implementation of interface IResultSetListener

public function nextGroup (rs:IResultSet):void
{
}

//  Receive individual POI and create a pushpin and info window
{
public function nextRow (rs:IResultSet):int
{
  const latLng:LatLng = new LatLng (rs.getNumber (2), rs.getNumber (3));
  const name:String = rs.getString (4);
  const info:String = rs.getString (5) + "\n" + rs.getString (6);

  const mkr:Marker = new Marker (
    latLng,
    new MarkerOptions ( { tooltip: name} ));
    mkr.addEventListener (MapMouseEvent.CLICK, function (e:MapMouseEvent):void {
      mkr.openInfoWindow (
        new InfoWindowOptions ( {
          title: "Starbucks",
          content: info
        })
      );
    }
  );

  map.addOverlay (mkr);

  //  Continue to receive more POI (if any)
  return ResultSet.NC_CONTINUE;
}

public function tagsReady (rs:IResultSet):void
{
}

public function queryClosed (rs:IResultSet):void
{
}

public function queryError (rs:IResultSet, code:int, message:String, resource:String):void
{
}

}

}

» Run SDB_Map...

Custom Markers on a Map.

package {

import com.google.maps.*;
import com.google.maps.controls.*;
import com.google.maps.overlays.*;
import com.spatialdatabox.query.*;
import com.spatialdatabox.util.*;

import flash.display.*;
import flash.geom.*;

public class SDB_Map extends Sprite implements IResultSetListener
{

private static const DEFAULT_SCREEN_SIZE:Point = new Point (600, 600);

private static const MAP_CENTER:LatLng = new LatLng (43.3, -79.8);
private static const QUERY_RADIUS_DEG:Number = 0.2;

private static const MARKER_COLOR:uint = 0x226633;
private static const MARKER_RADIUS_PIXELS:int = 10;

// Google Map
private const map:Map = new Map ();

//  Interface to SDB2
private var query:Query = null;

public function SDB_Map ()
{
  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align = StageAlign.TOP_LEFT;

  map.key = " .. your API key goes here .. ";
  map.setSize (DEFAULT_SCREEN_SIZE);
  map.addControl (new PositionControl ());
  map.addControl (new ZoomControl ());
  map.addControl (new MapTypeControl ());
  map.addControl (new OverviewMapControl ());
  map.addEventListener (MapEvent.MAP_READY, onMapReady);

  addChild (map);
}

public function onMapReady(event:MapEvent):void
{
  //  CENTER MAP
  map.setCenter (MAP_CENTER);
  map.setZoom (10);

  //  SUBMIT QUERY TO SDB

  Query.setOverrideDomainName ("http://spatialdatabox.com/");
  query = new Query (map);

  const swLatLng:LatLng = new LatLng (MAP_CENTER.lat () - QUERY_RADIUS_DEG, MAP_CENTER.lng () - QUERY_RADIUS_DEG);
  const neLatLng:LatLng = new LatLng (MAP_CENTER.lat () + QUERY_RADIUS_DEG, MAP_CENTER.lng () + QUERY_RADIUS_DEG);

  const args:Object = {
      layerName: "sbux",
      bbox: new LatLngBounds (swLatLng, neLatLng),
      projection: "id,latitude,longitude,name,street,address",
      secondaryCond: null
  };

  try {
  query.submitFirst (this, args);
  } catch (e:Error) {
    com.spatialdatabox.util.Log.msg ("querySDB failed with exception: " + e.message);
  }

}

//  Implementation of interface IResultSetListener

public function nextGroup (rs:IResultSet):void
{
}

public function nextRow (rs:IResultSet):int
{
  // GET MARKER INFO
  const latLng:LatLng = new LatLng (rs.getNumber (2), rs.getNumber (3));
  const name:String = rs.getString (4);
  const info:String = rs.getString (5) + "\n" + rs.getString (6);

  // CREATE MARKER SHAPE
  const customMarker:Shape = new Shape ();
  customMarker.graphics.beginFill (MARKER_COLOR);
  customMarker.graphics.drawCircle (0, 0, MARKER_RADIUS_PIXELS);

  // PLACE MARKER ON MAP
  const mkr:Marker = new Marker (
    latLng,
    new MarkerOptions ( { tooltip: name, icon : customMarker } ));
    mkr.addEventListener (MapMouseEvent.CLICK, function (e:MapMouseEvent):void {
      mkr.openInfoWindow (
        new InfoWindowOptions ( {
          title: "Starbucks",
          content: info
        })
      );
    }
  );

  map.addOverlay (mkr);

  return ResultSet.NC_CONTINUE;
}

public function tagsReady (rs:IResultSet):void
{
}

public function queryClosed (rs:IResultSet):void
{
}

public function queryError (rs:IResultSet, code:int, message:String, resource:String):void
{
}

}

}

» Run CustomMarkerMap ...