How to use Google Maps API with Flash AS3

December 1, 2008 by Emanuele Feronato
Filed Under Actionscript 3, Flash • 14 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:

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.geom.Point;
  5.     import com.google.maps.LatLng;
  6.     import com.google.maps.Map;
  7.     import com.google.maps.MapEvent;
  8.     import com.google.maps.MapType;
  9.     public class googlemap extends Sprite {
  10.         var map:Map = new Map();
  11.         public function googlemap() {
  12.             map.key = "ABQIAAAAF5GHwa7hgxz5etSP-jJVwhSK_rP-_Usta8fEpiVtC50gLzF69hQ6_VK0zgpArekpmdsRCJK2Vnp60A";
  13.             map.setSize(new Point(stage.stageWidth, stage.stageHeight));
  14.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  15.             this.addChild(map);
  16.             function onMapReady(event:Event):void {
  17.                 map.setCenter(new LatLng(45.436319770227,12.33638048172), 13, MapType.NORMAL_MAP_TYPE);
  18.             }
  19.         }
  20.     }
  21. }

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 (16 votes, average: 4.5 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

14 Responses to “How to use Google Maps API with Flash AS3”

  1. One on December 1st, 2008 2:23 pm

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

  2. songkhoon on December 1st, 2008 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 1st, 2008 6:04 pm

    Like it, always a nice app for a site.

  4. alfonsofonso on December 3rd, 2008 12:54 pm

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

  5. alfonsofonso on December 3rd, 2008 12:54 pm

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

  6. TJ Downes on December 12th, 2008 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 13th, 2009 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. Alejandro Guillen on March 26th, 2009 6:42 am

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

  9. Hendrik on March 27th, 2009 12:35 am

    Awesome, thnx!

Leave a Reply




Trackbacks

  1. How to use Yahoo Maps API with Flash AS3 : Emanuele Feronato on March 13th, 2009 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! [...]

  2. How to use Google Maps API with Flash AS3 - part 2 : Emanuele Feronato on March 18th, 2009 12:32 pm

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

  3. Introduction: Flash Google Maps API and Multi-touch | Cyan[c] Design on March 22nd, 2009 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 [...]

  4. weblog » Blog Archive » Googlemaps Flash API on April 26th, 2009 9:19 am

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

  5. iamnotbored.com » Blog Archive » flash google maps on May 20th, 2009 1:32 am

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

Posts