Working with Google Maps in Flex Mobile

This post is more than 2 years old.

So - I wasn't sure if I should post this blog entry. Why? What I'm describing is a bit of a failure. But the more I thought about it the more I figured that the experience I went through could be useful for others. Plus - there's always the chance that I made a simple mistake and someone will point it out. I then get to pretend that it was a test and quickly fix my code! That being said - what I'm about to describe should not be something you should try yourself. At least not in the same way I did. Ok - so enough preamble!

I decided to add one more simple feature to the INeedIt mobile application: driving directions. This is a topic I've covered before with JavaScript and jQuery Mobile, so I was curious as to how it would work in the Flex world. I knew that Google had an API for Flash and I'd heard good things about it. I figured I'd replace the static map image I had now while also adding in the driving directions.

I spent maybe 15 minutes looking over the docs. For the most part, it's incredibly easy. You download a SWC and add it to your project. (Total time - 60 seconds.)

You then drop a map tag into your Flex code. (Total time - 60 seconds.)

<maps:Map xmlns:maps="*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ABQIAAAANa2eDzLCrHnNGWxQ6nsUqBT0kcRajLdLCyGsAW6MRHnr7QX6dBTzuJkY4CKmc-3TB-8A2-9DEW3IXQ" sensor="false" url="" />

You then write an event handler to listen for the map ready event. Now - for me - this was the most tricky part. I use the map on a view that fires off a call to get detailed information about a Google Place data item. I basically have 2 network calls then. One for my Place data and one for the map to prepare itself. This is probably not the best way to do it - but I used variable flags to handle checking to see if the "other guy" was done. Here are the two functions:

private function placeResult(event:ResultEvent):void { var resultData:Object = JSON.decode(event.result.toString()); addressLabel.text = resultData.result.formatted_address; phoneLabel.text = resultData.result.formatted_phone_number;

//Store long/lat for use for driving directions
long = resultData.result.geometry.location.lng;
lat =;
//technically this could finish before mapReady - need to think
if(mapReady) drawMap();
trace("done ");	


protected function onMapReady(event:MapEvent):void { if(lat) drawMap(); mapReady = true; }

Basically, when placeResult is done it checks to see if the map is done. If so, it calls drapMap. onMapReady checks for the existence of lat, the latitude of the place result. If that exists, then it runs drawMap. This was the only real complex part to my code. (Total time: 5 minutes.)

Actually drawing the map then was pretty trivial. I used one simple function to center it on my Place result and added a marker as well. (Total time: 5 minutes.)

protected function drawMap():void { map.setCenter(new LatLng(lat,long), 16, MapType.NORMAL_MAP_TYPE); var markerA:Marker = new Marker(new LatLng(lat, long), new MarkerOptions({ strokeStyle: new StrokeStyle({color: 0x987654}), fillStyle: new FillStyle({color: 0x223344, alpha: 0.8}), radius: 12, hasShadow: true })); map.addOverlay(markerA); }

Woot! Pretty simple, right? Check out the result:

Unfortunately, this is where we hit a brick wall. On the simulator I noticed an odd pause when the place view was loaded. I figured it was a gremlin and didn't pay attention. When I tried it on my mobile device however - whoa buddy. Hitting the link to load a Place result now took about 15-30 seconds to load! Turns out Google Maps delays the loading of it's libraries. No wonder. If it takes that long to load I can see why. Unfortunately this pretty much kills the usability of the application. It seems like maybe there should be a way for everything else to happen except for the map loading until the view is there, but even if I didn't run drawMap, the mere existence of the Map tag caused the incredible slow down.


That sucks... but I decided to move on. Mainly because I wanted to see the driving directions anyway. Much like my jQuery Mobile example, I went for a text page approach. But unlike my old example that showed one step at a time, I figured I'd simply list out the results. I made some modifications to my code so that I could pass to my new view both the user's location and the place result location. Here's what I came up with:

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="" xmlns:s="library://" title="Driving Directions" viewActivate="init(event)"> <fx:Script> <![CDATA[ import; import; import; import; import;


		private function goBack(event:MouseEvent):void {

		protected function init(event:ViewNavigatorEvent):void {

			var dir:Directions = new Directions();
			dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
			dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);
			var waypoints:Array = [new LatLng(data.mylat,data.mylong),
										   new LatLng(,data.long)
			statusLabel.text = "Loading directions...";
		protected function onDirLoad(event:DirectionsEvent):void
			trace('got stuff back');
			var directions:String = "";
			var directionData:Directions = Directions(event.directions);
			//As before, use route 1
			if(directionData.numRoutes &gt;= 1) {
				var route:Route = directionData.getRoute(0);
				for(var i:int=0; i&lt;route.numSteps; i++) {
					var step:Step = route.getStep(i);
					var html:String = step.descriptionHtml;
					html = html.replace(/&lt;div class="google_note"&gt;/g,"\n\n");
					directions += html.replace(/&lt;.*?&gt;/g,"") + "\n\n";
				dirBox.text = directions;
			} else {
				//A lie, but close enough
				statusLabel.text = "Sorry, unable to get directions.";
		protected function onDirFail(event:Event):void
			statusLabel.text = "Sorry, unable to get directions.";
			trace('dir error');
	&lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;

	&lt;s:Button label="Back" click="goBack(event)" /&gt;		

	&lt;s:VerticalLayout gap="5" paddingTop="5" paddingLeft="5" paddingRight="5"/&gt;

	&lt;s:State name="loading" /&gt;
	&lt;s:State name="error" /&gt;
	&lt;s:State name="ready" /&gt;

&lt;s:Label id="statusLabel" includeIn="error,loading" /&gt;
&lt;s:Label id="dirBox" width="100%" height="100%" includeIn="ready" /&gt;


I love how easy Google's directions API are. In case it isn't obvious in the code above, this is all you really need:

var dir:Directions = new Directions(); dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad); dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);

var waypoints:Array = [new LatLng(data.mylat,data.mylong), new LatLng(,data.long) ]; dir.loadFromWaypoints(waypoints);

That's pretty darn simple, right? Once the directions are returned, I can simply loop over them and make a big ole string I then dump out to screen. Like so:

So... what to do? There are other mapping packages out there. I could switch. But I don't know if any of them provide directions support. I think I may switch back to the Google Static Map API and simply get rid of the driving directions. Kinda sucks, but, it's still a cool application. Any opinions out there? Remember that you can get all of the code via the Github repo. If you want to try the APK yourself, I've attached it to this blog post.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Ben Dalton posted on 5/21/2011 at 11:50 PM


Other people have been having similar problems. It looks as though there's a workaround:

It stems from google maps calculating a SHA1 on some large bytearray. This is an intensive/blocking operation. The workaround simply prevents the calculation from being performed.

If there weren't enough reasons already, this is another example of how Flash could benefit from some form of multithreading.

Comment 2 by Chris Griffith posted on 5/22/2011 at 2:08 AM

Here was my solution: http://chrisgriffith.wordpr...

In a nutshell, I used an instance of StageWebView and loaded a web version of the Google Map.

Comment 3 by Raymond Camden posted on 5/23/2011 at 8:18 PM

@Ben: I'll take a look at your link a bit later.

@Chris: The issue I have with StageWebView is that I don't know how to put it in a view and have it be part of a page. What I mean is - it's simple enough to just put it at 0,0. But then that covers the view's header. So I can probably guess at the right Y value, but then what if I want some label above it? Can you put a SWV in a page so that it lays out with the other items?

Comment 4 by Ed posted on 5/23/2011 at 8:46 PM

Have a look at Igor Costa's blog - he mentions a similar issue and a workaround (it's linked from Fullasagoog: my message is being 'flagged as spam' if I include the link?)

Comment 5 by Raymond Camden posted on 5/23/2011 at 8:54 PM

My spam checker can be a bit over the top sometimes - can you post a version?

Comment 6 by Raymond Camden posted on 5/24/2011 at 2:04 AM

Holy crap Ben. I just tried the fix, and it worked perfectly. Scary perfectly.

Comment 7 by Nepol posted on 10/3/2011 at 11:16 PM


Is there a link where I can download the .fxp project with this Get Directions update?

Thanks a lot for all your post I've learned a lot!

Comment 8 by Raymond Camden posted on 10/4/2011 at 5:41 PM

There is a Download link at the end of the entry.

Comment 9 by Brian Reed posted on 11/4/2011 at 6:58 AM

MapQuest has an API for Flex that is optimized for mobile. I've used it before and it works really well, if you can get past the part that it's MapQuest. http://developer.mapquest.c...

Comment 10 by xhe posted on 11/12/2011 at 8:41 PM

For mapQuest, I found it is slow and response is also slow. I used ios to test, the want the marker to be clickable. In my ipod touch, it is so difficult to click the marker. so I decided to remove it from mobile app.
For the google map api heck, also it does not work in ios. Works in desktop simulator. Maybe IOs is not providing AIR environment? Someone said android is ok, I will test it later.

Comment 11 by Fher posted on 12/30/2011 at 9:21 AM

I have the same problem of Xhe. I cant run the google map app in my ipod i have everyting. But on my Sony tabblet the same code works perfect. Someone have any idea????....

Comment 12 by Raymond Camden posted on 12/30/2011 at 9:46 AM

ios definitely supports AIR. Not sure what to recommend though. Google is no longer supporting Flex for maps.