• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 400
  • Last Modified:

Continuing writing ActionScript Coding

Utilizing the following code to access the Google Maps API, How would I now do the following:

1. Display the actual route/directions
2. Create a Drop-down list where the user must select from a list of location (both starting and ending)

As always your help is greatly appreciated!
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMoveEvent;
import com.google.maps.MapType;
import com.google.maps.interfaces.IPolyline;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.services.*;

var dir:Directions;
var polyline:IPolyline;
var map:Map;
function setupMap()
{
	var holder:Sprite = new Sprite();
	var startField:TextField = createNavTextField(10);
	holder.addChild(startField);
	
	var endField:TextField = createNavTextField(startField.x + startField.width + 10);
	holder.addChild(endField);
	
	var search:SimpleButton = new SimpleButton();
	search.upState = createButtonStateState(0xcccccc);
	search.overState = createButtonStateState(0xc6c6c6);
	search.downState = createButtonStateState(0x999999);
	search.hitTestState = createButtonStateState(0x999999);
	search.useHandCursor = true;
	search.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{
		if(dir == null){
			dir = new Directions();
		}else{
			dir.removeEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
		}
		dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
		dir.load(startField.text + " to " + endField.text);
	});
	
	var format:TextFormat = new TextFormat(); 
	format.align = TextFormatAlign.CENTER; 
	var label:TextField = new TextField();
	label.defaultTextFormat = format; 
	label.selectable = false;
	label.mouseEnabled = false;
	label.text = "Search";
	label.width = search.width;

	var sprite:Sprite = new Sprite();
	sprite.addChild(search);
	sprite.addChild(label);
	sprite.x = endField.x + endField.width + 10;
	sprite.y = endField.y;

	holder.addChild(sprite);

	map = new Map();
	map.sensor ="false";
	map.key ="ABQIAAAAjf2cvxDuc5J1E9CrJXmy9RQrAB2acdB4QgEQtVMeGDLCPkNwtRR8XAwx0MS9MI4RYmgwJ-jCIN9QaQ";
	map.setSize(new Point(400,400));
	map.x = startField.x;
	map.y = startField.y + startField.height + 5;
	holder.addChild(map);

	addChild(holder);
}
setupMap();

function createNavTextField(x:uint):TextField{
	var textField:TextField = new TextField();
	textField.autoSize = TextFieldAutoSize.NONE;
	textField.type = TextFieldType.INPUT;
	textField.multiline = false;
	textField.tabEnabled = true;
	textField.wordWrap = false;
	textField.border = true;
	textField.background = true;
	textField.x = x;
	textField.y = 10
	textField.width = 195;
	textField.height = 22;
	return textField;
}

function createButtonStateState(color:Number):Sprite {
	var sprite:Sprite = new Sprite;
	sprite.graphics.lineStyle(2, 0x000000);
	sprite.graphics.beginFill(color);
	sprite.graphics.drawRoundRect(0, 0, 80, 22, 10);
	sprite.graphics.endFill();
	return sprite;
}

function onDirectionsLoaded(event:DirectionsEvent):void
{
	var ONE_METER:Number = 0.000621371192; // Miles 
	var returnedDirection:Directions = event.directions as Directions;
	
	var startLatLng:LatLng = returnedDirection.getRoute(0).getStep(0).latLng;
	var endLatLng:LatLng = returnedDirection.getRoute(returnedDirection.numRoutes - 1).endLatLng;
	
	polyline = returnedDirection.createPolyline();
	
	// Remove everything from map and add back the markers and polyline 
	map.clearOverlays();
	map.addOverlay(polyline);
	map.addOverlay(new Marker(startLatLng));
	map.addOverlay(new Marker(endLatLng));
	map.setCenter(returnedDirection.bounds.getCenter(), map.getBoundsZoomLevel(returnedDirection.bounds));
	
	trace("Distance: " + Number(returnedDirection.distance * ONE_METER).toFixed(1) + " mi, " + 
		Math.round(returnedDirection.duration / 60) +  " mins");

	
	}

Open in new window

0
fool5683
Asked:
fool5683
  • 6
  • 5
1 Solution
 
dgofmanCommented:
Can you use Adobe Flex mx:ComboBox?
0
 
quizengineCommented:
Since you seem to have few responses, I thought I would try a little lateral thought.

My lateral thought was "If you are struggling to know how to implement features, maybe there is some reusable code that already exists for what you need".

I don't pretend to know what you are trying to build, but I thought (actually, hoped is closer to the mark) this might do

http://activeden.net/item/google-map-road-planner/81949

0
 
fool5683Author Commented:
dgofman:I can use the ComboBox. But I dont have a clue as to the actual syntax involved.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dgofmanCommented:
I can see you are pointing to  Adobe Flex zone so looks like you doesn't care using Adobe CS PR or Flex. I will recommend to use Flex. In this case I can create a project from you and give instruction in pure AS code. Otherwise I need to submit FLA
0
 
dgofmanCommented:
I can see you are pointing to  Adobe Flex zone so looks like you don't care using Adobe CS Pro or Flex. I will recommend to use Flex. In this case I can create a project for you and give an instruction pure AS code. Otherwise I need to submit FLA
0
 
fool5683Author Commented:
the pure AS code will be perfect
0
 
dgofmanCommented:
Here is code for Flex. I am storring last locations

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
				width="500" height="500" backgroundColor="#ffffff" 
				paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
				initialize="setupMap();" horizontalScrollPolicy="off" verticalScrollPolicy="off">
	<mx:Script>
		<![CDATA[
			import com.google.maps.InfoWindowOptions;
			import com.google.maps.LatLng;
			import com.google.maps.LatLngBounds;
			import com.google.maps.Map;
			import com.google.maps.MapEvent;
			import com.google.maps.MapMoveEvent;
			import com.google.maps.MapType;
			import com.google.maps.interfaces.IPolyline;
			import com.google.maps.overlays.Marker;
			import com.google.maps.overlays.MarkerOptions;
			import com.google.maps.services.*;
			
			private var dir:Directions;
			private var polyline:IPolyline;
			private var map:Map;
			private var so:SharedObject;

			private function setupMap():void
			{
				so = SharedObject.getLocal("locations");
				from.dataProvider = so.data.from != null ? so.data.from : [];
				to.dataProvider = so.data.to != null ? so.data.to : [];

				map = new Map();
				map.key ="ABQIAAAAjf2cvxDuc5J1E9CrJXmy9RQrAB2acdB4QgEQtVMeGDLCPkNwtRR8XAwx0MS9MI4RYmgwJ-jCIN9QaQ";
				canvas.rawChildren.addChild(map);
			}

			private function getDisrection():void{
				if(dir == null){
					dir = new Directions();
				}else{
					dir.removeEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
				}
				dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
				dir.load(from.text + " to " + to.text);
				if(!from.dataProvider.contains(from.text)){
					from.dataProvider.addItemAt(from.text, 0);
					so.data.from = from.dataProvider.source;
					so.flush();
				}
				if(!to.dataProvider.contains(to.text)){
					to.dataProvider.addItemAt(to.text, 0);
					so.data.to = to.dataProvider.source;
					so.flush();
				}
			}

			private function onDirectionsLoaded(event:DirectionsEvent):void
			{
				var ONE_METER:Number = 0.000621371192; // Miles 
				var returnedDirection:Directions = event.directions as Directions;
				
				var startLatLng:LatLng = returnedDirection.getRoute(0).getStep(0).latLng;
				var endLatLng:LatLng = returnedDirection.getRoute(returnedDirection.numRoutes - 1).endLatLng;
				
				polyline = returnedDirection.createPolyline();
				
				// Remove everything from map and add back the markers and polyline 
				map.clearOverlays();
				map.addOverlay(polyline);
				map.addOverlay(new Marker(startLatLng));
				map.addOverlay(new Marker(endLatLng));
				map.setCenter(returnedDirection.bounds.getCenter(), map.getBoundsZoomLevel(returnedDirection.bounds));
				
				trace("Distance: " + Number(returnedDirection.distance * ONE_METER).toFixed(1) + " mi, " + 
					Math.round(returnedDirection.duration / 60) +  " mins");
			}

			private function onResize():void{
				map.width = canvas.width; 
				map.height = canvas.height; 
			}
		]]>
	</mx:Script>
	<mx:HBox width="100%">
		<mx:HBox width="{width - 100}" horizontalScrollPolicy="off">
			<mx:ComboBox width="50%" id="from" editable="true" dataProvider="[]"/>
			<mx:ComboBox width="50%" id="to" editable="true" dataProvider="[]"/>
		</mx:HBox>
		<mx:Button label="Search" click="getDisrection()"/>
	</mx:HBox>
	<mx:Canvas id="canvas" width="100%" height="100%" resize="onResize()"/>
</mx:Application>

Open in new window

0
 
fool5683Author Commented:
Im sorry dgofman, I thought that I could work with the Flex file but when I pasted it in my Adobe Flash Pro, I get the following error messages:
0
 
fool5683Author Commented:
Im sorry dgfman, here are the errors that I am getting after after attempting to paste code in actionscript file:

Script-1, Line 4      1078: Label must be a simple identifier.
Script-1, Line 4      1008: Attribute is invalid.
Script-1, Line 4      1084: Syntax error: expecting semicolon before layout.
Script-1, Line 87    1093: Syntax error.
Script-1, Line 88          1093: Syntax error.
Script-1, Line 90          1093: Syntax error.
Script-1, Line 92          1093: Syntax error.
0
 
dgofmanCommented:
I wrote for Flex SDK. Can you use Flex SDK its free and you can download Flash Builder trial version or FlashDevelop is free

https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder

http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page

0
 
fool5683Author Commented:
I dont have a clue about the Flex SDK, I really must have misspoke when I suggested I could propbably utilize it. I have Flash Pro CS5 if that makes any sense. I apologize any confusion that I am causing. I can work with FLV files if that helps.
0
 
fool5683Author Commented:
I actually utilized your previous Actionscript code and eventually came up with this solution:
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapMoveEvent;
import com.google.maps.MapType;
import com.google.maps.interfaces.IPolyline;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.services.*;

var dir:Directions;
var polyline:IPolyline;
var map:Map;
function setupMap()
{
      var holder:Sprite = new Sprite();
      var startField:TextField = createNavTextField(10);
      holder.addChild(startField);
      
      var endField:TextField = createNavTextField(startField.x + startField.width + 10);
      holder.addChild(endField);
      
      var search:SimpleButton = new SimpleButton();
      search.upState = createButtonStateState(0xcccccc);
      search.overState = createButtonStateState(0xc6c6c6);
      search.downState = createButtonStateState(0x999999);
      search.hitTestState = createButtonStateState(0x999999);
      search.useHandCursor = true;
      search.addEventListener(MouseEvent.CLICK, function(event:MouseEvent):void{
            if(dir == null){
                  dir = new Directions();
            }else{
                  dir.removeEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
            }
            dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,onDirectionsLoaded);
            dir.load(startField.text + " to " + endField.text);
      });
      
      var format:TextFormat = new TextFormat();
      format.align = TextFormatAlign.CENTER;
      var label:TextField = new TextField();
      label.defaultTextFormat = format;
      label.selectable = false;
      label.mouseEnabled = false;
      label.text = "Search";
      label.width = search.width;

      var sprite:Sprite = new Sprite();
      sprite.addChild(search);
      sprite.addChild(label);
      sprite.x = endField.x + endField.width + 10;
      sprite.y = endField.y;

      holder.addChild(sprite);

      map = new Map();
      map.sensor ="false";
      map.key ="ABQIAAAAjf2cvxDuc5J1E9CrJXmy9RQrAB2acdB4QgEQtVMeGDLCPkNwtRR8XAwx0MS9MI4RYmgwJ-jCIN9QaQ";
      map.setSize(new Point(400,400));
      map.x = startField.x;
      map.y = startField.y + startField.height + 5;
      holder.addChild(map);

      addChild(holder);
}
setupMap();

function createNavTextField(x:uint):TextField{
      var textField:TextField = new TextField();
      textField.autoSize = TextFieldAutoSize.NONE;
      textField.type = TextFieldType.INPUT;
      textField.multiline = false;
      textField.tabEnabled = true;
      textField.wordWrap = false;
      textField.border = true;
      textField.background = true;
      textField.x = x;
      textField.y = 10
      textField.width = 195;
      textField.height = 22;
      return textField;
}

function createButtonStateState(color:Number):Sprite {
      var sprite:Sprite = new Sprite;
      sprite.graphics.lineStyle(2, 0x000000);
      sprite.graphics.beginFill(color);
      sprite.graphics.drawRoundRect(0, 0, 80, 22, 10);
      sprite.graphics.endFill();
      return sprite;
}

function onDirectionsLoaded(event:DirectionsEvent):void
{
      var ONE_METER:Number = 0.000621371192; // Miles
      var returnedDirection:Directions = event.directions as Directions;
      
      var startLatLng:LatLng = returnedDirection.getRoute(0).getStep(0).latLng;
      var endLatLng:LatLng = returnedDirection.getRoute(returnedDirection.numRoutes - 1).endLatLng;
      var returnedDistance = Number(returnedDirection.distance * ONE_METER).toFixed(1);
      var returnedTime = Math.round(returnedDirection.duration / 60) + 30;
      returnedDistance_txt.text = "The total distance to your destination is " +  returnedDistance + " Miles";
      returnedTime_txt.text = "You should allow at least " +  returnedTime + " Minutes to arrive and find adequate parking due to typical traffic flow";
      
      
      
      polyline = returnedDirection.createPolyline();
      
      // Remove everything from map and add back the markers and polyline
      map.clearOverlays();
      map.addOverlay(polyline);
      map.addOverlay(new Marker(startLatLng));
      map.addOverlay(new Marker(endLatLng));
      map.setCenter(returnedDirection.bounds.getCenter(), map.getBoundsZoomLevel(returnedDirection.bounds));
      
      trace("Distance: " + Number(returnedDirection.distance * ONE_METER).toFixed(1) + " mi, " +
            Math.round(returnedDirection.duration / 60) +  " mins");

      
      }
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now