In Adobe Flash, you can use a wide range of external APIs provided by Web services like Facebook , Twitter or Flickr . In this tutorial we will see how to integrate, in a really simple, the services of Google Maps in a movie / application Adobe Flash CS4. I state that the procedure to use Google Maps in Flash is very similar to what happens with HTML / JavaScript (see for details How to insert google map into your web ).
Download and install the SDK
First store in your browser's bookmark the website address in Google Maps API for Flash . On this site we find all that we Server to use the Google API. On the right of the page you can access a range of resources, including links to download the SDK for use in Flash. Save the zip on your desktop (or Desktop) and unzip it. . In the directory sdk/lib you will find a file called map_1_16.swc . per PC) e posizionatelo all'interno di questo percorso: Copy this file to the clipboard ( Command-C for Mac or Ctrl-C for PC) and place it within this path:
1 2 3 4 5 | / / Mac [User folder] / Library / Application Support / Adobe / Flash CS4/language/Configuration/Components / / Windows [User folder] \ Local Settings \ Application Data \ Adobe \ Flash CS4 \ language \ Configuration \ Components |
e incollate il file map_1_16.swc . If the folder Components does not already exist, create it and create a folder that Google and paste the file map_1_16.swc . If by chance you've already opened Flash (hurry ...), close it and rapritelo, so it can reload the newly installed.
We create the Flash movie
Now open Flash and create a new movie. Open the Components window and you should find Google Maps:
Select the component GoogleMapsLibrary and drag on the Stage. In the first frame of our movie simply enter the following code:
1 2 3 4 5 6 7 8 9 10 11 12 | / / Classes Amount Google Maps google . maps .*; with imports. google. .* maps; google . maps . overlays .*; with imports. google. maps. .* overlays; google . maps . controls .*; with imports. google. maps. .* controls; : Map = new Map ( ) ; var map: Map = new Map (); key = "API_KEY" ; // vedi sotto per ottenere una tua chiave map. key = "api_key", / / see below to get your own key / / This example sets the size of the Google Map / / Same size as the movie. Alternatively you can enter / / Size you prefer. setSize ( new Point ( stage . stageWidth , stage . stageHeight ) ) ; map. setSize (new Point (internship. stageWidth, internships. stageHeight)); map ) ; addChild (map); |
In line 7, you must replace the string API_KEY with the activation key that Google provides. To get back on the site just Google Maps API for Flash and request an API Key click on Sign up for a Google Maps API Key . When prompted to enter the url of the site on which you want to use the Flash movie that accesses the API, in case you do not know yet or voucher simply test the movie locally, place http://localost and click Generate API Key:
At this point we can already test the movie, getting:
Let's add some control
First, add the classic controls Position, Zoom and Map Type. To do this we must be sure that the map is ready for use. Just then create an event listener MapEvent.MAP_READY . So let's add the following lines of code:
1 2 3 4 5 6 7 8 | / / Add controls addEventListener ( MapEvent . MAP_READY , onMapReady ) ; map. addEventListener (MapEvent. MAP_READY, onMapReady); e : MapEvent ) : void { onMapReady function (e: MapEvent): void { addControl ( new PositionControl ( ) ) ; map. AddControl (PositionControl new ()); addControl ( new ZoomControl ( ) ) ; map. AddControl (ZoomControl new ()); addControl ( new MapTypeControl ( ) ) ; map. AddControl (MapTypeControl new ()); } |
We set up an address
At this point we can set the map to display a specific address, as the home of my company Saidmade in Modena - or any other address you like.
Tip: To find the coordinates of our address or latitude and longitude, we can use this simple and useful hacks. Open the site Google Maps . Once on the map looking for the address you want (for example via Cortese 10, Modena). When the address is displayed on the map, put this line in the address bar of your browser:
1 | ( prompt ( '' , gApplication. getMap ( ) . getCenter ( ) ) ) ; javascript: void (prompt ('', gApplication. getMap (). getCenter ())); |
This will open a pop-up window with the coordinates used in the code:
Let's go back to ActionScript and add the following lines of code in the onMapReady() :
1 2 | / / Center the map on a specific location setCenter ( new LatLng ( 44.639828 , 10.941795 ) , 18 , MapType . SATELLITE_MAP_TYPE ) ; map. setCenter (new LatLng (44.639828, 10.941795), 18, MapType. SATELLITE_MAP_TYPE); |
We make the movie:
Add a Marker
Also within the function onMapReady() add the following lines of code:
1 2 3 | / / Add the default marker Marker = new Marker ( new LatLng ( 44.639828 , 10.941795 ) ) ; var m: Marker = new Marker (new LatLng (44.639828, 10.941795)); addOverlay ( m ) ; map. addOverlay (m); |
Markers can be customized at will, either through the styles provided by Google APIs themselves, or through Flash. For example, adding that import beginning of the code:
1 | google . maps . styles .*; with imports. google. maps. .* styles; |
I replaced the code and creating Marker seen before with:
1 2 3 4 5 6 7 8 9 10 | / / Add the default marker Marker = new Marker ( var m: Marker = new Marker ( 44.639828 , 10.941795 ) , New LatLng (44.639828, 10.941795), MarkerOptions new ({ StrokeStyle ( { color : 0x987654 } ) , strokeStyle: StrokeStyle new ({color: 0x987654}), FillStyle ( { color : 0x223344 , alpha : 0.8 } ) , FillStyle: FillStyle new ({color: 0x223344, alpha: 0.8}), , radius: 12, hasShadow: true })); addOverlay ( m ) ; map. addOverlay (m); |
we obtain the following effects:
Alternatively you can attach directly to a MovieClip as a marker. Being a MovieClip, of course, it will contain animations, videos or any other type of interactive content with Flash support. You can also draw lines and shapes so as to create interactive maps and rich media content.
To add a MovieClip and just create it, using for example an image or Flash animation, and set its properties as follows:
Without this change the marker creation code in:
1 2 3 4 | / / Add the default marker Marker = new Marker ( new LatLng ( 44.639828 , 10.941795 ) , var m: Marker = new Marker (new LatLng (44.639828, 10.941795), icon : new myMarkerMovieClip ( ) } ) ) ; MarkerOptions new ({icon: new myMarkerMovieClip ()})); addOverlay ( m ) ; map. addOverlay (m); |
All information on APIs, classes, methods, properties and events are available on Google Maps ActionScript API Reference .
Moreover, the whole package was recently updated with many new and interesting features, such as 3D maps .
[...] Update: See How to use Google Maps in Adobe Flash CS4 [...]
Great tutorial, although I prefer to use them in Flex
@ Napolux I imagined
- Since the cute tricks (javascript) to get "on the fly" and Lang Lat Google Maps?! 
wonderful!
... Mah ... to customize the map for example 600 * 600 x 200 y 250 in as3 as they have to manage!?
They are the first lines with as3.
Tnks for all!
you can store the key and the coordinates by typing them on the external xml file and then read them and then send the point
map.key = "API_KEY";could you tell me how to do?
Thank you.
@ Devis: if the XML file is present on a server you can certainly read it, but not write it directly. To learn how to see Flash CS3: communicating with a Web Server
It only works with Flash CS4?
I tried it with CS3, but I get the message:
2
swf location, version and network availability. "
@ Max:
No, it can also be used with Adobe Flash CS3. See here for details
hello, thank you for the tutorial is very useful.
One thing I do not understand, when you use a marker, it is possible to make sure it looks the white cloud of google with the various information sull'inidirizzo above it, as it usually happens by clicking on the markers in google maps?
@ Nuovobuio: To do this you must use the method:
map.openInfoWindow(), for example:Where
optionsused, for example:2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
TextFormat = new TextFormat ( ) ; var titleFormat: TextFormat = new TextFormat ();
= true ; titleFormat. bold = true;
StyleSheet = new StyleSheet ( ) ; var titleStyleSheet: StyleSheet = new StyleSheet ();
Object = { var h1: Object = {
"#FFFF80" , color: "# FFFF80"
} ; fontWeight: "bold"};
( "h1" , h1 ) ; titleStyleSheet. setStyle ("h1", h1);
StyleSheet = new StyleSheet ( ) ; var contentStyleSheet: StyleSheet = new StyleSheet ();
Object = { var body: Object = {
"#FF0080" , color: "# FF0080"
"italic" } ; fontStyle: "italic"};
( "body" , body ) ; contentStyleSheet. setStyle ("body", body);
TextFormat = new TextFormat ( "Arial" , 10 ) ; var contentFormat: TextFormat = new TextFormat ("Arial", 10);
InfoWindowOptions = new InfoWindowOptions ( { var options: InfoWindowOptions InfoWindowOptions = new ({
strokeStyle: {
0x987654 color: 0x987654
},
FillStyle: {
0xffffff , color: 0xffffff,
0.8 alpha: 0.8
},
titleFormat: titleFormat,
titleStyleSheet: titleStyleSheet,
contentFormat: contentFormat,
, title: "My title",
"Ciao come va?" , content: "Hello how are you?"
contentStyleSheet: contentStyleSheet,
200 , width: 200,
, CornerRadius: 12,
, padding: 10,
, hasCloseButton: true,
, hasTail: true,
, tailWidth: 20,
, tailHeight: 30,
, tailOffset: - 12,
ALIGN_LEFT , tailAlign: InfoWindowOptions. ALIGN_LEFT,
Point ( 3 , 8 ) , pointOffset: new Point (3, 8),
hasShadow: true
});
Hello, very kind. I ask one more thing that is clear to me I'm trying to adapt the aliasing of the text at will, with the classic:
I do not understand where to put it.
The text always appears grainy, I can not find
texFieldto apply aliasing, where is it?? Do not see it?@ Nuovobuio: the fact that you can not find the
textFieldprobably means that you entered directly onto the Stage. To set the type of antialiasing to remember, however, you need to embed the fonts, or do not work. If the TextField is the stage you can set the type of antialiasing by selecting the TextField (perhaps you mean Label or TextInput) and changing the parameters in the / properties panel.If you want to operate from the code, the TextField must have an identification, ie a unique name that allows you to reference the code. To set the instance name (like "miotextfield"), you can always work from the Stage: Select the component and the window / panel properties "instance name" insert "miotextfield". If you have trouble send me the code.
I'm sorry, I was not clear I meant the aliasing of the text of the cloud of google map, the title and content of the code that I have previously posted, I can not set the alias, the text always appears to me "ruined".
Where are the various options for how google map? They are all here or there are others like the thickness of the boundary line of the cloud, etc.?
Excuse me, is the first time I flash maps ..
I asked a question too stupid?
@ Nuovobuio:
not, however, worry ... you have to look in the Google documentation . Only if Google APIs allow you to set the aliasing. Those objects are not directly addressable Flash. Ergo, if Google does not support it you can not set 
afraid 
no .. should not be
I followed the tutorial to the letter, included in the map library, and put on the screen using
addChild()from library:2
( mioOggetto ) ; mcSezione3. addChild (MyObject);
works only locally, if you try it online, he says:
2
swf location, version and network availability.
I also added the url of the site to receive the key, but nothing on the network will not work, but locally it works fine .. is in as3 with cs4 .. help me to solve?
Hello, follow the tutorial and everything perfect.
One thing I wanted to chide, for fixed sizes of the map, exactly what I have to write the code in place of:
2
map ) ; addChild (map);
Thanks and hello!
@ Mark: In the map is set so as to have the same size of the entire movie:
stage.stageWidth, stage.stageHeight. So, depending on the size of your movie you can enter the values that you deem appropriate, for example:2
map ) ; addChild (map);
@ Giovambattista Fazioli:
Perfect, thanks a lot, it works.
I noticed one thing, I do not know if it's normal though.
The map is inside a flash site, divided into sections, all in the same swf.
basically when I go to another page-section and then return to the page-map, it appears to me the whole world and no longer controls. I do not know why, the first blow and then if you return it no longer.
Thank you. Mark's.
Hello, I have the exact same problem .. Mark works the first time, then disappear when I return checks and localities stabilita.Qualcuno know what is this?
thanks
@ Marco2: sounds like a problem with the browser cache which is reflected on the movie. probably depends on how it's working because the code the first time the defect is due to the "reload" the page. So the movie is not properly charged to the "back" of the browser. I would try to force a refresh in some way ...
Hello, I solved by writing the following code, a blend from goole to official and Giovanbattista:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
google . maps . styles .*; with imports. google. maps. .* styles;
google . maps . LatLng ; with imports. google. maps. LatLng;
google . maps . Map ; with imports. google. maps. Map;
google . maps . MapEvent ; with imports. google. maps. MapEvent;
google . maps . MapType ; with imports. google. maps. MapType;
google . maps . controls .*; with imports. google. maps. .* controls;
google . maps . overlays .*; with imports. google. maps. .* overlays;
: Map = new Map ( ) ; var map: Map = new Map ();
key = "..." ; map. key = "...";
setSize ( new Point ( 700 , 500 ) ) ; map. setSize (new Point (700, 500));
addEventListener ( MapEvent . MAP_READY , onMapReady ) ; map. addEventListener (MapEvent. MAP_READY, onMapReady);
addChild ( map ) ; this. addChild (map);
addEventListener ( MapEvent . MAP_READY , onMapReady ) ; map. addEventListener (MapEvent. MAP_READY, onMapReady);
e : MapEvent ) : void { onMapReady function (e: MapEvent): void {
addControl ( new PositionControl ( ) ) ; map. AddControl (PositionControl new ());
addControl ( new ZoomControl ( ) ) ; map. AddControl (ZoomControl new ());
addControl ( new MapTypeControl ( ) ) ; map. AddControl (MapTypeControl new ());
setCenter ( new LatLng ( xxx , xxx ) , 10 , MapType . NORMAL_MAP_TYPE ) ; map. setCenter (new LatLng (xxx, xxx), 10, MapType. NORMAL_MAP_TYPE);
Marker = new Marker ( var m: Marker = new Marker (
xxx , xxx ) , New LatLng (xxx, xxx)
MarkerOptions new ({
StrokeStyle ( { color : 0xFF6532 } ) , strokeStyle: StrokeStyle new ({color: 0xFF6532}),
FillStyle ( { color : 0xFF9865 , alpha : 1.0 } ) , FillStyle: FillStyle new ({color: 0xFF9865, alpha: 1.0}),
, radius: 12,
} ) hasShadow: true})
);
addOverlay ( m ) ; map. addOverlay (m);
}
Boys but if I have to put it in a web aito cme should I do? I do public html but I get just a gray box while swf is fine why?
@ Joseph:
You must also put the code in the HTML tag, the API Key.
Ie I = map.key and then we put all of that string http:// ... ....?
I can not do it .... but where I put all that html code with the key?
Hello everyone,
if I wanted to use part of the stage for the map and for the rest of the menu
would be possible to load the map in a defined area rather than opens movieclip across the stage? How could I tell Flash to load the map area defined by the symbol created?
thanks
Hello,
congratulations for the tutorial, I have been really helpful. I have a question for you (I'm not so expert AS3): How do I move the map object on the Stage?
Thanks
@ Lawrence: You can move it simply by acting on the stage, move and resize with the mouse. dell'oggetto, tipo: If you want to do that by code you can use the properties
xandyof the object, type:2
y = 50 ; map. y = 50;
Hello My name is Patrick,
Your tutorial was very useful to me only now I found myself faced with a little problem ...
If I export the movie and the text locally on my localhost correctly loads the map instead of a domain of the host Aruba gives me this error:
2
swf location, version and network availability.
the html code of the page that guides looking on Google is this:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"allowScriptAccess" value = "sameDomain" / > < param name = "allowScriptAccess" value = "sameDomain" />
"allowFullScreen" value = "false" / > < param name = "allowFullScreen" value = "false" />
"movie" value = "dovesiamo.swf" / > < param name = "movie" value = "dovesiamo.swf" />
"quality" value = "high" / > < param name = "quality" value = "high" />
"bgcolor" value = "#ffffff" / > < param name = "bgcolor" value = "# ffffff" />
<Embed src = "dovesiamo.swf"
quality = "high"
bgcolor = "# ffffff"
width = "1002"
height = "517"
name = "Doves"
align = "middle"
allowScriptAccess = "sameDomain"
allowFullScreen = "false"
type = "application / x-shockwave-flash"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
/>
</ object >
while my AS3 code is:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
google . maps .*; with imports. google. .* maps;
google . maps . styles .*; with imports. google. maps. .* styles;
google . maps . LatLng ; with imports. google. maps. LatLng;
google . maps . Map ; with imports. google. maps. Map;
google . maps . MapEvent ; with imports. google. maps. MapEvent;
google . maps . MapType ; with imports. google. maps. MapType;
google . maps . controls .*; with imports. google. maps. .* controls;
google . maps . overlays .*; with imports. google. maps. .* overlays;
: Map = new Map ( ) ; var map: Map = new Map ();
key= "ABQIAAAAA8CizyunDAeEXoQIb62lchT1OkJTPzIYI04p2bE9wlnkO_DE3RQZuRn-y9-4ljmnryrjNPH9EU48Eg" ; map. key = "ABQIAAAAA8CizyunDAeEXoQIb62lchT1OkJTPzIYI04p2bE9wlnkO_DE3RQZuRn-Y9-4ljmnryrjNPH9EU48Eg";
/ / This example sets the size of the Google Map
/ / Same size as the movie. Alternatively you can enter
/ / Size you prefer.
setSize ( new Point ( 600 , 400 ) ) ; map. setSize (new Point (600, 400));
map ) ; addChild (map);
x = 20 ; map. x = 20;
y = 20 ; map. y = 20;
/ / Add controls
addEventListener ( MapEvent . MAP_READY , onMapReady ) ; map. addEventListener (MapEvent. MAP_READY, onMapReady);
e : MapEvent ) : void { onMapReady function (e: MapEvent): void {
/ / Center the map on a specific location
setCenter ( new LatLng ( 41.887185 , 12.562806 ) , 18 , MapType . SATELLITE_MAP_TYPE ) ; map. setCenter (new LatLng (41.887185, 12.562806), 18, MapType. SATELLITE_MAP_TYPE);
/ / Add the default marker
/ / Var m: Marker = new Marker (new LatLng (41.887185,12.562806));
Marker = new Marker ( new LatLng ( 41.887185 , 12.562806 ) , var m: Marker = new Marker (new LatLng (41.887185, 12.562806),
icon : new myMarkerMovieClip ( ) } ) ) ; MarkerOptions new ({icon: new myMarkerMovieClip ()}));
addOverlay ( m ) ; map. addOverlay (m);
addControl ( new PositionControl ( ) ) ; map. AddControl (PositionControl new ());
addControl ( new ZoomControl ( ) ) ; map. AddControl (ZoomControl new ());
addControl ( new MapTypeControl ( ) ) ; map. AddControl (MapTypeControl new ());
}
@ Patrick: If you work locally but not on the site of operation, the problem may be, as you indicated on the API key. The API key is tied to the operating domain of the map, then for each domain (like
localhost) it must generate a new one. In practice you need to generate a new API key for your domain and operating sostituila to that used inlocalhost.It should now work thanks ... I did not realize I had that for each domain to generate an API cmq ... better late than never ... But now I have another problem ... I think I've done this over ...
You know the other bar where you can change the display mode of the map, that is, for example, where you can switch from map satellite hybrid etc etc??
The bar display and if I click it all works properly but the names on the buttons are there so I can not give a button for users of marine biotoxins ...
if I do I solve this thing ENOOOOOORME a pleasure ... XD
Thanks, however, the time I spend ...
Patrician
@ Patrick: What do you mean exactly with:
Do not label appears? That is, the button is just a blank gray rectangle? Because if it is some bug in Adobe Flash ... or did I misunderstand?
@ Giovambattista Fazioli: No. It should have got it right ... the label is a gray bar without any written work but it works ... boh ... please help me !?!?!?
@ Patrick: So there is a problem that goes beyond the code. new MapTypeControl ( ) ) ; si vedono e, tra l'altro, è difficile commettere errore di codice su una riga così semplice. As you can see from the images presented in this article the "label" buttons added with
map . addControl ( new MapTypeControl ( ) ) ;seen, and, among other things, it is difficult to commit an error code on a line as simple as that. Ergo, there is something wrong at a lower level, see versions of Flash Player installed on your browser, for example.For if you un'indirizzo Web for all to see where you can view the map in question? If anything is a problem, "your" local, and I see well?! That would be a step forward ...
@ Giovambattista Fazioli: This is the address is http://www.daynightclub.it/prove2/dovesiamo.html
expect the link does not work ... now I load the other way and I'll tell you ...
@ Giovambattista Fazioli: Here is the domain that works ... http://www.regalaunfiore.it/prova/dovesiamo.html
@ Patrick: I may have understood. If you have used for a "mask" - to make the edges rounded to the map! If so try to take it off!
Me too capitatala was the same thing, but I did not use masks.
I removed the label and all.
@ Giovambattista Fazioli: Yes it should have used the mask but I need some cover corners because I do not like the map square so how do I fix??
@ Patrick: If the defect continues removing the mask (as shown by Marco above), try to send me the source, who knows ... I could have lighting
Hello Giovanni, I send you my fla for the problem of label, from which you can download the link is this:
http://www.valledelrieslingoltrepo.it/dovesiamo.fla
It 'was made with Fl cs5, I hope you manage to open it.
I can not figure out where the problem is.
Forget the rest, and all images are loaded from an external xml I need to do.
Thank you.
As I mentioned to Mark, try to do it all with CS4, the problem may be some incompatibility between the new CS5 and the component provided by Google. After all, this post was made with the CS4 suite. Let me know, we open an issue to the limit to Google / Adobe
Perhaps the problem is the CS5, now I no longer have cs4, this problem was also in cs4, I cs5 I installed about 1 month ago and the problem was already a few months before, when I did the site .
Here for example I used the CS5 is the problem there.
Enter the site and click on "where" everything works.
http://www.marchesidimontalto.it/marchesi_di_montalto.html
I do not know, maybe it's just a bug.
Hello.
@ Mark: Curious! If Flash is the same, and also in the code, perhaps the problem may lie in the markup of the page, type: encoding or DOCTYPE declaration or in
<object>/<embed>for example ...I congratulate Giovambattista for tutorials, really well done ...
Thank you!