Google Maps Driving Directions with ActionScript

Google Maps Driving Directions with ActionScript

In a recent post, I showed the basics of embedding a Google Maps inside your Flex/Flash projects …

With this article I wanna show you this awsome service that the Google Maps API offers….

The Google Driving Directions service, enables you to apply driving directions to your Google Map …

[code lang="actionscript"]

key="your-map-key" width="100%" height="100%"/>

import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;
import com.google.maps.Color;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.Marker;
import flash.utils.getTimer;
import com.google.maps.services.DirectionsOptions;
import mx.controls.Alert;

import com.google.maps.services.DirectionsEvent;
import com.google.maps.services.Directions;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

// Global directions object
private var dir:Directions;
private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(50.736072,4.2102), 9, MapType.NORMAL_MAP_TYPE);
this.map.addControl(new ZoomControl());
this.map.addControl(new MapTypeControl());
// initialize the directions
var dir:Directions = new Directions();
// Set the mode to driving and language to english
var directionOptions:DirectionsOptions = new DirectionsOptions({language: 'en',countryCode: 'US',travelMode: DirectionsOptions.TRAVEL_MODE_DRIVING});
dir.setOptions(directionOptions);
// Event listeners
dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, dirSuccess);
dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, dirFail);
dir.load("from: Bakersfield to: California");
}

// Process the driving directions step by step
private function processDirections():void{
for(var counter:int = 1;counter<=dir.getRoute(0).numSteps;counter++){
if (counter <= dir.getRoute(0).numSteps) {
var marker:Marker = new Marker(dir.getRoute(0).getStep(counter-1).latLng, new MarkerOptions({label:counter.toString()}));
marker = createStepMarker(marker, dir.getRoute(0).getStep(counter-1).descriptionHtml.toString());
map.addOverlay(marker);
}
}
}

// Create information marker when a marker is clicked
private function createStepMarker(marker:Marker, infoText:String):Marker {
marker.addEventListener(MapMouseEvent.CLICK, function(e:MapMouseEvent):void {
map.openInfoWindow(marker.getLatLng(), new InfoWindowOptions({contentHTML: infoText}));
});
return marker;
}

private function dirSuccess(event:DirectionsEvent):void {
// Success of the Directions service
dir = event.directions;
// Set the map centre
map.setCenter(dir.bounds.getCenter());
// Create a overlay line
map.clearOverlays();
map.addOverlay(dir.createPolyline());
processDirections();
// Create start and end marker
var startMarker:Marker = new Marker(dir.getRoute(0).startGeocode.point, new MarkerOptions({fillStyle: {color:Color.GRAY8}}));
var endMarker:Marker = new Marker(dir.getRoute(0).endGeocode.point, new MarkerOptions({fillStyle: {color:Color.GRAY3}}));
map.addOverlay(startMarker);
map.addOverlay(endMarker);
}

private function dirFail(event:DirectionsEvent):void {
// Failure of the Direction service
// Error codes description: http://code.google.com/intl/nl/apis/maps/documentation/flash/reference.html#Directions
// Error description: class ServiceStatus
Alert.show("Status: " + event.directions.status);
}

]]>


[/code]

download flex project
Although this is a Flex project, the ActionScript code is the same for any Flash application.

About the Author

Daan is a Creative-Geek with passion for Adobe Flash , Flex and Air. He loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com