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"]
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.
very nice feature! It will also be very useful if you can see the route on a textual way, like in google maps.
Keep up the good work
Wel you can click the markers to see the textual information.
Or you can just prompt all the steps …. Depends on how you want it off course …