Using Google Maps API in Flex

This example uses geocoding, getRoute, step by step directions, and printing to create a useful google map in flex.

In order to implement this, you need a google account, API key , and you need to download the Flash/flex SDK.

use this link:

http://code.google.com/apis/maps/documentation/flash/

After you unzip the sdk file do the following:

1) take the flex.swc file out of the libs folder (the version I’m using is called map_flex_1_8b.swc)
2) put that file somewhere where you want to keep it (preferably outside of your flex project – in a folder designated for library assets)
3) in your flex file, goto Project -> Properties -> Flex Build Path -> Library Path -> Add SWC
4) browse for your swc and select it.

The only other thing to remember is to import the classes you need and declare a namespace for the map (this is in the source)

here is the main actionscript to make this happen: (Right click on the map for full source)

import mx.controls.Alert;
import flash.events.Event;
import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.services.*;
import com.google.maps.controls.*;
import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import TitleWindowDirections;
import com.tetraktysdesign.TitleWindowWpath;

private var titleWindow:TitleWindowWpath;

private var dir:Directions;

private var turnCounter:uint = 0;

public var step:String = “”;

private var doIt:Boolean = false;

private function onMapReady(event:MapEvent):void {
map.addControl(new ZoomControl());
doGeocode();
dir = new Directions();

dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);

}

private function processDirections(event:Event):void {
dir.load(“from: ” + from.text + ” to: ” + to.text);

turnCounter = 0;

}

private function onDirFail(event:DirectionsEvent):void {
Alert.show(“Directions Failed – Check your address and try again.”);
}

private function onDirLoad(event:DirectionsEvent):void {
var dir:Directions = event.directions;
var startMarker:Marker;
var endMarker:Marker;

map.clearOverlays();
map.addOverlay(dir.createPolyline());
map.setZoom(map.getBoundsZoomLevel(dir.bounds));
map.setCenter(dir.bounds.getCenter());

startMarker = new Marker(dir.getRoute(0).startGeocode.point, new MarkerOptions({fillStyle: {color:Color.GREEN}}));
endMarker = new Marker(dir.getRoute(0).endGeocode.point, new MarkerOptions({fillStyle: {color:Color.BLUE}}));
map.addOverlay(startMarker);
map.addOverlay(endMarker);
if(doIt==true){
processTurnByTurn();
}
}

private function processTurnByTurn():void {

var stepText:String;
var stepMarker:Marker;
step = “”;
for(var i:int=0; i turnCounter++;

if (turnCounter <= dir.getRoute(0).numSteps) {
stepText = dir.getRoute(0).getStep(turnCounter-1).descriptionHtml;
stepMarker = new Marker(dir.getRoute(0).getStep(turnCounter-1).latLng, new MarkerOptions({label: turnCounter.toString()}));
map.addOverlay(stepMarker);
step += "Step " + turnCounter + ": " + stepText + "'\n'";
} else {

step += "Arrive at " + to.text + " : " + dir.getRoute(0).summaryHtml;
}
}
launchDirections();

}

public function launchDirections():void{

var myTitle = TitleWindowDirections;

titleWindow = PopUpManager.createPopUp(this, myTitle, true) as TitleWindowWpath;
titleWindow.path=step;
}
private function doGeocode():void {

var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
map.setCenter(placemarks[0].point,15,MapType.PHYSICAL_MAP_TYPE);
var marker:Marker = new Marker(placemarks[0].point);

marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
});
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
Alert.show(“Geocoding failed”);
trace(event);
trace(event.status);
});
geocoder.geocode(to.text.toString());
}