Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Installing and Using Google Maps in Flex

Installing and Using Google Maps in Flex

Learn how to build a basic application to display a Google Maps component.

View an Example of this article before you get started.

Google has just released a Flash edition of the Google Maps API. In this tutorial you will how to install the necessary components and build a very basic map.

This tutorial will be done using Adobe Flex Builder, but you are also able to use the Flex SDK if you prefer. Google has information regarding that process on their site.

Start off by downloading the Google Maps SDK and applying for a developers API key. Once you have both of these pieces, you can start setting up your work environment.

Locate the "sdk.zip" file that you downloaded (normally on your Desktop) and unzip the contents. Inside the "sdk/lib" directory you will find a map_flex_1_1.swc file. Copy this file to a known location on your computer. Most often your documents directory. This file will be loaded into Flex later on in the process.

Now that you have the SWC moved out of the sdk directory, start Flex Builder and create a new project (File > New Flex Project).

Once the "GoogleMaps Sample" project is created, you need to include the maps swc you downloaded. To do this you right click on the project entry in the "Flex Navigator" and choose Properties. Choose "Flex Build Path" and then click "Add SWC.." in the Properties dialog box. In this new dialog, click "Browse" and navigate to where you copied the swc file. With the swc file selected, click "Open" and "Ok". Then finally click "Ok" one more time to save the changes to the project.

Now that the Google Maps code is available to Flex, you can start building the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
		<![CDATA[
				
		]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>

The above code set an event on the Application tag, as well as a width and height attribute. The UIComponent will be where the map is loaded into. You must give this component a unique ID, otherwise Flex will be unable to reference it.

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

Now that the display portion of the code is completed, the next step is to load in the necessary classes for the map.

private var gMap:Map;

Then define a private variable that will reference the map instance.

private function init():void
{
	gMap = new Map();
	gMap.key = "{YOUR_API_KEY_HERE}";
	gMap.width = 600;
	gMap.height = 400;
	gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
	
	mapContainer.addChild(gMap);
}

The next step is to define the init() function, which is called when the Flex app is loaded. The function creates a new map instance and sets the required properties. Once the properties are set, you need to add an event handler for when the map is fully loaded and finally attach the map instance to the container.

private function mapReadyHandler(e:MapEvent):void
{
	gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
	gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
}

The last bit of code is the event handler that is called when the map is fully loaded. This bit of code centers the map coordinates and sets the size to the width and height of the application.

You can now test the application in debug mode. If you run the application locally the map will be overlayed with "DEBUG", as shown below. However, all other functionality will exist.

In case you didn't notice, Google shipped the documentation for these classes along with the SDK, so start digging and build cool map-based applications.

Note: At the time of this writing Google Maps cannot be used in AIR applications due to a TOS (terms of service) violation. However, you can show your support on this feature request over on the Issue tracker.

Here is the complete application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  width="100%" height="100%" initialize="init()">
		
	<mx:Script>
	<![CDATA[

	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.LatLng;
		
	private var gMap:Map;

	private function init():void
	{
		gMap = new Map();
		gMap.key = "{YOUR_API_KEY_HERE}";
		gMap.width = 600;
		gMap.height = 400;
		gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

		mapContainer.addChild(gMap);
	}
	
	private function mapReadyHandler(e:MapEvent):void
	{
		gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
		gMap.setSize(new Point(mapContainer.width, mapContainer.height)); 
	}
		
	]]>
	</mx:Script>
		
	<mx:UIComponent id="mapContainer" width="100%" height="100%"/>
	
</mx:Application>

Hope you enjoyed this article, stay tuned for more great Flex Builder related tutorials.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Installing and Using Google Maps in Flex

 abhishek  Wed Jun 11, 2008 12:40 am  
could we do the example like map shows location which written in textfield by user
abhishekchess1@gmail.com
thx
 mkeefe  Wed Jun 11, 2008 10:15 am  
@abhishek, Are you asking for an example or whether you can submit one?
 tim  Thu Jun 12, 2008 10:58 am  
With the above code, how can you add other features in Google Maps? such as a custom icon or Info Windows?
Thanks

Tim


http://code.google.com/apis/maps/documentation/flash/basics.html#FlexDevelopment
 mkeefe  Thu Jun 12, 2008 11:13 am  
I plan to write more articles in time, but for now the docs from Google may help.

http://code.google.com/apis/maps/documentation/flash/reference.html
 Brad  Fri Jun 13, 2008 5:54 pm  
Thanks for the example code but...

You left out an important line in the final code.

private var gMap:Map;

Hope this helps someone ;-)
 mkeefe  Fri Jun 13, 2008 5:55 pm  
@Brad, good find. thanks!
 Mohammed Al-Asmar  Wed Jun 18, 2008 3:50 pm  
Dear mkeefe
How I can use this inside Flash CS3 ?
 mkeefe  Wed Jun 18, 2008 3:53 pm  
@Mohammed, At the moment this tutorial is for Flex only. The code is similar, but the setup is where it differs. Once I get some time I will write up a version for Flash.

Google does have some info at the links I posted in this article.

Hope that helps,
 Simon  Thu Jun 19, 2008 8:40 am  
Has this been tested in Flex Builder 3.0 and with the latest version of the map_flex_1_4.swc.
When I follow your instructions to the letter I get a message saying: Initialization failed: please check the API key,
swf location, version and network availability.

Im a Flex-newbie, so Im not sure what is wrong, but Ive tested it in a number of variations without any luck, so now I just want to be sure.
 mkeefe  Thu Jun 19, 2008 8:44 am  
@Simon, I did test it with FB3 and in fact, I wrote the tutorial on the latest release. The error you received is usually caused by not providing an API key, or registering for one domain and using it on another.
 Mohammed Al-Asmar  Sat Jun 21, 2008 3:08 am  
Dear mkeefe ,
Thanks a lot , I am checking this blog daily ;)
 Avdhesh Sharma  Wed Jun 25, 2008 11:35 am  
Hi mkeefe,

I am new to flex. I have used all the same steps you explained but its give me errors. after compiling the application i uploaded these 3 files on my server
main-test.html
main.swf
playerProductInstall.swf

http://www.avdheshsharma.com/main-test.html

when i opening this is giving me error please help.

Regards,
Avdhesh
 mkeefe  Wed Jun 25, 2008 11:58 am  
@Avdhesh, Did you register with Google for an API key (for that domain the file is on now)?

Also, make sure you pasted the API key in place of {YOUR_API_KEY_HERE}
 Avdhesh  Thu Jun 26, 2008 3:16 am  
Hi Mkeefe,

I have register with the key but it was not working because i have paste the between "{}" i have removed the {} from the code and paste the key its working.

Thanks a lot for the help and posting this amazing tutorial.

One more thing i want to ask you... I have a flash application where i was using the AFcomponent flash map API and which has been written in AS 2.0.

This is done in FLEX do you have any idea how to use the same with flash rather then FLEX or can i use my flash animation file with FLEX??

Thanks,
Avdhesh
http://www.designguru.co.in
 mkeefe  Thu Jun 26, 2008 3:55 am  
The code in Flash and Flex is similar, but not identical. Depending on the code, it would need to be modified, most likely in order for it to work in Flash.
 Arthurnasius Amanyire  Mon Jun 30, 2008 4:30 am  
hi am using coldfusion to get data into a flex datagrid and when a user clicks on one of the rows of the datagrid i would like that a for him/her to be taken to a location on the map and there should be a custom maker showing the address of the location.how can i do that. one of the grid columns is for cityname.
 mkeefe  Mon Jun 30, 2008 10:57 am  
@Arthurnasius,

You would attach an event to the DataGridColumn, check whether its the correct column and generate a point from that. The dataProvider should already contain the location when the DataGrid is loaded, that way you can use the selectedIndex and figure out which row is clicked.
 youhock  Sat Jul 19, 2008 12:54 am  
hi, i tried using it with adobe air but somehow it throws an error. Any idea? thanks
 jj1910  Mon Jul 21, 2008 11:01 am  
Hi mkeefe,

first of all: thanks for this tutorial!

Unfortunately I could not make it work in FlexBuilder3. I followed all the steps (opening a new flex project, adding the SWC file to the Flex Build Path and adding the ActionScript Code) but FlexBuilder keeps pretending not to know the methods of the map object (e.g. gMap.key) and throws an compile error.

When I try the same thing in an pure Actionscript Project (also in FlexBuilder) everything works fine.

Do you have any ideas what I might be missing?

Thanks!
 mkeefe  Sun Jul 27, 2008 9:51 pm  
@youhock - There is a known limitation concerning this script and Adobe AIR. I am unaware of any workarounds.

@jj1910 - What compile error do you get?
 Tinitus  Tue Jul 29, 2008 7:20 am  
Nice tut. Thanks. And a question - are you going write one for UI?
Regs.
 mkeefe  Tue Jul 29, 2008 9:41 am  
@Tinitus - Thanks, Do you mean a tutorial on how to use the UI or create your own?
 prasanth  Wed Jul 30, 2008 2:43 am  
Nice tut. thanks . and a question - are you going write one for ui
 Cyberoverdose  Wed Jul 30, 2008 10:53 am  
I get this error: Type was not found or was not a compile-time constant Map Event. this is the line it highlights


private function mapReadyHandler(e:MapEvent):void
 Guest  Wed Jul 30, 2008 1:02 pm  
http://www.digitallogicunlimited.com/DLGmaps/bin/GoogleMaps.html

Initialization failed: please check the API key,
swf location, version and network availability.

i registered the key why am i still getting this error?
 mkeefe  Wed Jul 30, 2008 2:40 pm  
@Cyberoverdose - Make sure the classes and packages are loaded.

@Guest - Seems to work in Firefox.. might have been a cache issue.
 cyberoverdose  Thu Jul 31, 2008 9:22 am  
It works thanks you. Has anyone modified the code to enter your own cordinance?
 Mohammed Al-Asmar  Sun Aug 17, 2008 6:37 am  
Thanks a lot for your respone
 kanedogg  Thu Aug 28, 2008 2:53 am  
First : nice tutorial works FINE!! off the BAT !

Secondly ---- NOOBS = Jeesus people that just copy and paste code & then post a comment asking for help when it's like an API key or copy paste fromatting IS SOOOOO frustrating ! honestly & i now it may sound mean BUT if half the people actually took more than 5 minutes in learning some type of coding they wouldnt even have to ask half the questions. Copy & paste only last so LONG ! READ A BOOK
 mkeefe  Thu Aug 28, 2008 3:01 am  
@kanedogg - As blunt as that may sound, you couldn't be more right! I am all for helping others (the concept of the site) but its sad to see a tutorial get a bad comment becauase of a user error.

Of course, in the end I like to help and it seems to accomplish that.
 Tomer  Mon Sep 8, 2008 3:55 am  
i can see the map :)
but... i would like to see all the names in my language (hebrew). i know that in the javascript version i can use the parameter hl=he, and i will see Israel area in hebrew.
but i don't have a clue how to do that in the flash version.
any idea?
thanks
 Hyder Alamgir  Tue Sep 16, 2008 6:46 pm  
@Tomer - the map class has a property language that you can use to switch between supported languages.

Read the Google API documentation here:
http://code.google.com/apis/maps/documentation/flash/reference.html#Map.language

It won't work directly by entering a parameter in the browser. You will need to implement deep linking in flex to allow for dynamic url changes to reflect in language settings.

Hope it helps!
 Guest  Fri Oct 10, 2008 8:40 am  
Thank you for the informative tutorial.

I am new to flex and am investigating development options for a project I am on that has just started up.

How would this work with Google Earth Enterprise behind a firewall that cannot connnect to the internet and therefore cannot validate the registration key ?
 MARTA  Thu Nov 6, 2008 9:54 am  
please contact me regardig to cooperation with Flash and FLex Developer's magazine cooperation
marta.kobus@ffdmag.com

Thanks,
Marta.
 mkeefe  Sun Nov 9, 2008 11:38 am  
@Guest - You would need to allow access to Google, I am pretty sure the map will fail.. unless it was on localhost. Which would make the mapping code think its in debug.
 Kim  Tue Feb 10, 2009 1:25 pm  
Thank you for this tutorial. This was one of the best beginner tutorials I have read and worked like a charm. I look forward to reading more.
 Silva Developer  Tue Apr 21, 2009 5:13 pm  
Very good example.

I need your help for create an app with google maps but with other type of map and i need insert points.


Thanks,

Silva Developer
silva.developer@gmail.com
 Sirisha  Wed Jun 10, 2009 7:05 am  
i have generated a new API key, tried with the above code, but not able to view google map,

pls help me
 Ganesh  Tue Jul 28, 2009 5:57 am  
Excellent tutorial

Iam not able to run this in local host(i mean in my pc)

Plz help..
 mkeefe  Mon Aug 3, 2009 10:05 am  
@Ganesh - You may want to contact Google about developer testing locally since the domain check would obviously fail.
 handoyo  Fri Aug 21, 2009 1:03 am  
@mkeefe Hi,thanks..I wan to ask..Is it possible to make a line path for example from road a to road b with google maps?Thanks a lot...
 Justin  Fri Oct 23, 2009 5:47 pm  
For those just using the SDK to compile their code and node Flex Builder you will need to add the map_flex_1_17.swc (your file may not be named exactly that) to your classpath to get your code working. Otherwise you will receive the mysterious "error type was not found or not a compile-time constant: mapevent" or something to that effect.

To do this go to the go to the location of flexsdk directory and place it in the lib directory. For example, mine is: C:devflexsdklib
 Wally Kolcz  Thu Jan 14, 2010 9:57 am  
Does anyone know if you can create a 'test' key. I develop all my sites locally on my laptop and I cannot get the maps to work since the API key is generated for the live site. Any idea?
 mkeefe  Wed Jan 20, 2010 11:25 am  
@Wally Kolcz - If you do not include the API key Google will display the words "DEBUG MODE" on the map but you should have no issues testing everything.
 Rahim  Fri Dec 2, 2011 8:08 am  
I cannot get my application to position my instances correctly on gmap.

If we use a public browser then ok.
If we use a private site i.e (proxy + fw) this fails.

According to our fw logs, nothing is being rejected and the fw guys say that the flash code is hidden.

We have enabled:
/mapsapi/publicapi/geo?mapclient=flashapi
Maps.google.com

But still does not work, it is definately an fw issue as we have tried by passing the proxy, and cannot be a software issue as on a pubic site (via phone or 3G) it works.
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles