Be my fan on FacebookHow to use Google Maps API with Flash AS3
- December 1, 2008 by Emanuele Feronato
- Filed under Actionscript 3, Flash | 20 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.
(24 votes, average: 4.63 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
20 Responses
Leave a Reply
TUTORIAL SERIES:
- Una guida completa al gioco del poker online e una selezione dei migliori casino online.
- casino online
- migliori casino online
- BlackJack online
- casinò online
Whoa, that’s awesome, thx for this information (too)
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.
Like it, always a nice app for a site.
it works nice! is there any more fla files elsewhere, because i dont have flex…
salut!
ah! my example:
http://www.lalluvia.com/gmap/gMap.html
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.
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=
[...] 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! [...]
[...] How to use Google Maps API with Flash AS3 if you are new to Google Maps API for [...]
[...] 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 [...]
do you know if you can use kml with google maps as3
Awesome, thnx!
[...] http://www.emanueleferonato.com/2008/12/01/how-to-use-google-maps-api-with-flash-as3/ [...]
[...] http://www.emanueleferonato.com/2008/12/01/how-to-use-google-maps-api-with-flash-as3/ [...]
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!
How can i use http://local.google.com/ to get reviews and ratings in flash??
[...] 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 [...]
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?
Hey thanks for the good example, was really helpful. The Google tutorial was rubbish! Ciao!
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 ..