How to use Google Maps API with Flash AS3

December 1, 2008 • Actionscript 3, Flash by Emanuele Feronato • 22 Comments

I was playing with Google Maps API for Flash when I noticed the tutorials in the official page are somehow not that smart, so I am going to clarify some things.

Follow these simple steps:

Sign up for a Google Maps API Key at this link. Once you submit the form, ignore everything you see on the page (it refers to javascript version), just write down the key.

Download the Google Maps API for Flash SDK at this link. Inside the archive you will find a lib directory with a file called map_1_8a.swc inside. The official Google docs refer to a map_1_7.swc file, so this file could be updated anytime. Just refer to the map_xxx.swf, no matter the version you are downloading.

Install the API SWC component to your Flash creating a Google folder with map_xxx.swf inside.

The path to this folder varies from CS3 to CS4, it should be placed in
\en\Configuration\Components
if you are running CS3 (watch out the en, it may differ according to your language) and
\Common\Configuration\Components
if you are running CS4.

Create a new Flash file and open the components window. You can find this window on Window -> Components menu. You should find a Google -> GoogleMapsLibrary compoent. Drag in on stage wherever you want (you will set its position later).

Don’t worry about the size.

Now it’s time to write the class.

Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	public class googlemap extends Sprite {
		var map:Map = new Map();
		public function googlemap() {
			map.key = "ABQIAAAAF5GHwa7hgxz5etSP-jJVwhSK_rP-_Usta8fEpiVtC50gLzF69hQ6_VK0zgpArekpmdsRCJK2Vnp60A";
			map.setSize(new Point(stage.stageWidth, stage.stageHeight));
			map.addEventListener(MapEvent.MAP_READY, onMapReady);
			this.addChild(map);
			function onMapReady(event:Event):void {
				map.setCenter(new LatLng(45.436319770227,12.33638048172), 13, MapType.NORMAL_MAP_TYPE);
			}
		}
	}
}

Line 4: importing the Point class in order to use a point later. This is not explained in the official tutorial as it writes the code directly into the timeline.

Lines 5-8: importing Google libraries

Line 10: declaring the new map type

Line 12: inserting the key API

Line 13: setting the size of the map to fill the entire stage, using the Point class

Line 14: listener for the map to be ready

Line 15: adding the map itself

Lines 16-18: once the map is ready, show us Venice!

Here it is:

If you give me good feedback, I’ll show you how to create custom controls and some more tricks.

Download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (36 votes, average: 4.75 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 22 comments

  1. One

    on December 1, 2008 at 2:23 pm

    Whoa, that’s awesome, thx for this information (too)

  2. songkhoon

    on December 1, 2008 at 4:52 pm

    This is really cool.
    Last time I have use the component provide by afcomponents.com, can use some of the function in the google map.

  3. Daniel Rodriguez

    on December 1, 2008 at 6:04 pm

    Like it, always a nice app for a site.

  4. alfonsofonso

    on December 3, 2008 at 12:54 pm

    it works nice! is there any more fla files elsewhere, because i dont have flex…
    salut!

  5. alfonsofonso

    on December 3, 2008 at 12:54 pm

    ah! my example:
    http://www.lalluvia.com/gmap/gMap.html

  6. TJ Downes

    on December 12, 2008 at 6:15 pm

    You forgot a couple of crucial steps:

    19. Realize Google has no local search integration
    20. Use Yahoo Maps instead

    :)

    What I am finding is that while each of the map APIs have pros and cons, Yahoo map seems to offer more in terms of functionality, unless you want to use them both in combination.

    Ive also found that Google maps tends to be more sluggish than Yahoo, but ymmv.

  7. Pamela Fox

    on March 13, 2009 at 11:20 pm

    Thanks for this, alfonso.

    @TJ – You can integrate local search with Flash API via the Local Search API:
    http://code.google.com/apis/maps/documentation/flash/demogallery.html?searchquery=local&classname=

  8. How to use Yahoo Maps API with Flash AS3 : Emanuele Feronato

    on March 13, 2009 at 11:47 pm

    [...] is quite the same tutorial as How to use Google Maps API with Flash AS3, but this time we’ll learn how to use Yahoo! [...]

  9. How to use Google Maps API with Flash AS3 - part 2 : Emanuele Feronato

    on March 18, 2009 at 12:32 pm

    [...] How to use Google Maps API with Flash AS3 if you are new to Google Maps API for [...]

  10. Introduction: Flash Google Maps API and Multi-touch | Cyan[c] Design

    on March 22, 2009 at 3:29 am

    [...] I came across Emanuele Feronato’s website, italian geek and PROgrammer. She has a tutorial to get you started using the GoogleMaps API, so here is your first task in this [...]

  11. Alejandro Guillen

    on March 26, 2009 at 6:42 am

    do you know if you can use kml with google maps as3

  12. Hendrik

    on March 27, 2009 at 12:35 am

    Awesome, thnx!

  13. weblog » Blog Archive » Googlemaps Flash API

    on April 26, 2009 at 9:19 am

    [...] http://www.emanueleferonato.com/2008/12/01/how-to-use-google-maps-api-with-flash-as3/ [...]

  14. iamnotbored.com » Blog Archive » flash google maps

    on May 20, 2009 at 1:32 am

    [...] http://www.emanueleferonato.com/2008/12/01/how-to-use-google-maps-api-with-flash-as3/ [...]

  15. Maverik0106

    on September 19, 2009 at 10:43 pm

    Hey this is great, Thanks a lot for the awesome work here, I was just wondering, this works if you put the script inside the flash file, but you’re showing us the package which means its coming from an actionscript file, so my question is, how do you call it from within flash???

    I know you have to go googlemap();
    but it asks you for an argument inside the function caller. So my question is, what would the argument be inside the function caller?

    thanks in advance for your help!

  16. Pavan

    on October 12, 2009 at 11:47 am

    How can i use http://local.google.com/ to get reviews and ratings in flash??

  17. Introduction: Flash Google Maps API and Multi-touch « Kelso’s Corner

    on February 11, 2010 at 1:01 pm

    [...] I came across Emanuele Feronato’s website, Italian geek and PROgrammer. He has a tutorial to get you started using the GoogleMaps API, so here is your first task in this [...]

  18. roughbern

    on February 23, 2010 at 10:46 pm

    I am new to the google map api for flash. I found your example helpful to understand more about how they work. I was wondering what the line

    9 public class googlemap extends Sprite {

    did for the map and how you would add a marker for a business for example?

  19. Jimmy

    on March 11, 2010 at 1:17 pm

    Hey thanks for the good example, was really helpful. The Google tutorial was rubbish! Ciao!

  20. Mark

    on July 4, 2010 at 8:53 pm

    thax alot .. it is amazing .. i was looking for this .. if u can just tell us how to make the custom control buttons.!!!
    thx again ..

  21. Google maps application with actionscript 3 for android ( AIR ) | Moe Zainal

    on January 23, 2011 at 10:03 pm

    [...] google maps api for flash ( Emanuele Feronato tutorial [...]

  22. mnu7

    on March 31, 2011 at 9:45 am

    I use the same code, and for key I use localhost as I want to run it on my PC.
    Resultant key I put in my AS3 code but still get error.
    What else changes to make

< >