In Adobe Flash, you can use a wide range of external APIs provided by Web services such as 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 in HTML / JavaScript (for details see How to add Google Map in your Web ).
Download and install the SDK
First we store in our browser's bookmark the site's address in Google Maps API for Flash . On this site we find everything that server to use the Google API. On the right side of the page you can access a range of resources, including the link to download the SDK for use in Flash. Save the ZIP on your desk (or desktop) and unzip it. . In the folder 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 in 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 in this Google and paste the file map_1_16.swc . If by chance you were already open Flash (hasty ...), close it and rapritelo, so that it can reload the newly installed.
We create the Flash movie
At this point we open Flash and create a new movie. Open the Components window and you should find Google Maps:
Select the component GoogleMapsLibrary and drag it to the Stage. In the first frame of our film simply enter the following code:
1 2 3 4 5 6 7 8 9 10 11 12 | / / Amount classes Google Maps google . maps .*; import com. google. maps. *; google . maps . overlays .*; import com. google. maps. overlays. *; google . maps . controls .*; import com. 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 key / / In this example, imposed on the size of the Google Map / / Same size as the movie. Alternatively, you can enter the / / Size you prefer. setSize ( new Point ( stage . stageWidth , stage . stageHeight ) ) ; map. setSize (new Point (internship. stageWidth, stage. stageHeight)); map ) ; addChild (map); |
In line 7, you have to replace the string API_KEY with the activation key that Google provides. To get it just go on the site Google Maps API for Flash and request an API Key by clicking on Sign up for a Google Maps API Key . When you are asked to enter the url of the site on which you want to use the Flash movie accessing the Google API, in case you do not know yet voletete or simply test the movie locally, enter http://localost and click on the Generate API Key:
At this point we can already test the movie, getting:
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 . We then add the following lines of code:
1 2 3 4 5 6 7 8 | / / Add the 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 (new PositionControl ()); addControl ( new ZoomControl ( ) ) ; map. AddControl (new ZoomControl ()); addControl ( new MapTypeControl ( ) ) ; map. AddControl (new MapTypeControl ()); } |
We set an address
At this point we can set the map to display a specific address, as the seat of my company Saidmade in Modena - or any address you like.
Tip: To find the coordinates of our address or latitude and longitude, we can use this simple and useful hack. Open your site in Google Maps . Once on the map look for the address you would like (eg 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 function 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 carry the movie:
Add a Marker
Still inside 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 the Google APIs themselves, either via Flash. For example adding this import at the beginning of the code:
1 | google . maps . styles .*; import com. google. maps. styles. *; |
and sostituiendo code creation 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), new MarkerOptions ({ StrokeStyle ( { color : 0x987654 } ) , strokeStyle: new strokeStyle ({color: 0x987654}), FillStyle ( { color : 0x223344 , alpha : 0.8 } ) , fillStyle: new FillStyle ({color: 0x223344, alpha: 0.8}), , radius: 12, hasShadow: true })); addOverlay ( m ) ; map. addOverlay (m); |
seguento get the effect:
Alternatively, you can directly associate a MovieClip as a Marker. Being a MovieClip, of course, it can contain animations, videos or any other type of interactive content supported in Flash. You can also draw lines and shapes so as to create interactive maps and rich multimedia content.
To add a MovieClip and sufficient to create it, using for example an image or Flash animation, and set its properties as follows:
Without this change the creation code in Marker:
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 ( ) } ) ) ; new MarkerOptions ({icon: new myMarkerMovieClip ()})); addOverlay ( m ) ; map. addOverlay (m); |
All information about the APIs, classes, methods, properties and events are available on Google Maps ActionScript API Reference .
In addition, the whole package has been recently updated with many new and interesting, 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: imagine
- Having that cute little trick (javascript) to get "on the fly" and Lat Lang from Google Maps?! 
wonderful!
... Well ... to customize the map for example, 600 * 600 200 y ax 250 in as3 how should I handle them?!
They are the first lines with as3.
Tnks for all!
You can store the key and coordinates writing them on external XML file and then read it and then send the point
map.key = "API_KEY";could you tell me how to do?
Thank you.
@ Devis: if the XML file is located on a server you can certainly read it but not write it directly. To learn how to see Flash CS3: communication 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. "
@ Massimo:
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 do so it appears the white cloud of google with various information sull'inidirizzo above it, as it usually happens by clicking on the marker in google maps?
@ Nuovobuio: to do this you must use the method:
map.openInfoWindow(), for example:Where is
optionsuses, 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 you one more thing that is clear to me I'm trying to adapt the aliasing of text at my own pace, with the classic:
but I do not know where to put it.
The text always appears grainy, I do not find
texFieldto apply aliasing, where is it?? I do not see?@ Nuovobuio: the fact that you do not find the
textFieldit probably means that you entered it directly on the Stage. To set the type of AntiAlias remembered, however, that you must embed the fonts, otherwise it will not work. If the TextField on the Stage is you can set the type of AntiAlias selecting the TextField (perhaps you mean Label or TextInput) and changing the parameters in the window / panel properties.If you want to operate by code, the TextField must have un'identificativo, that is a unique name that allows the code to reference it. To set the instance name (such as "miotextfield"), you can always operate from the Stage: select the component and the window / panel property "instance name" insert "miotextfield." If you have trouble send me the code.
I'm sorry, I have not been clear, I meant the aliasing of the text of the cloud of google map, the title and the content of the code that I've previously posted, I can not set him aliasing, the text always appears to me "ruined".
Where do you find the various options to be set for google map? They are all here or are there other type line width of the perimeter of the cloud etc?
I'm sorry, this is the first time I try the maps in flash ..
I asked a question too stupid?
@ Nuovobuio:
no, quiet ... but you have to look at the Google documentation . Only if Google APIs allow you to define the aliasing. Those are not directly addressable Flash objects. Ergo, if Google does not support it you can not set 
sorry 
nothing .. wrong
I followed the tutorial to the letter, inserted the map in the library, and put it on the screen using
addChild()from the library:2
( mioOggetto ) ; mcSezione3. addChild (MyObject);
only works locally, if I try it online, it tells me:
2
swf location, version and network availability.
I also added the url of the site to get the key, but nothing on the network will not work, instead it works fine locally .. is with as3 cs4 .. help me to solve?
Hello, I followed the tutorial and everything perfect.
One thing I wanted to chidere for the sizes of the fixed map, exactly what should I write the code in place of:
2
map ) ; addChild (map);
Thank you and hello!
@ Mark: In the example the map is set so as to have the same dimensions of the entire movie:
stage.stageWidth, stage.stageHeight. So, depending on the size of your movie you can enter the values you deem appropriate, such as:2
map ) ; addChild (map);
@ Giovan Battista Fazioli:
Perfect, thank you very much, 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 and then return to the section-page-map, I get this with the whole world and without controls. I do not know why, the first hit and then if there is not going the return.
Thank you. Marco.
Hello, I have the exact same problem .. Mark works the first time, then when we return controls disappear and location stabilita.Qualcuno know why is that?
thanks
@ Marco2: it would seem a problem with the browser cache that is reflected in the movie. probably depends on how the code is written as running the first time the defect is due to the "reload" the page. So the movie is not reloaded correctly to the "back" of the browser. I would try to somehow force a refresh ...
Hello, I solved it by writing the following code, a fusion from that of goole officer and to 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 .*; import com. google. maps. styles. *;
google . maps . LatLng ; import com. google. maps. LatLng;
google . maps . Map ; import com. google. maps. Map;
google . maps . MapEvent ; import com. google. maps. MapEvent;
google . maps . MapType ; import com. google. maps. mapType;
google . maps . controls .*; import com. google. maps. controls. *;
google . maps . overlays .*; import com. 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 (new PositionControl ());
addControl ( new ZoomControl ( ) ) ; map. AddControl (new ZoomControl ());
addControl ( new MapTypeControl ( ) ) ; map. AddControl (new MapTypeControl ());
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)
new MarkerOptions ({
StrokeStyle ( { color : 0xFF6532 } ) , strokeStyle: new strokeStyle ({color: 0xFF6532})
FillStyle ( { color : 0xFF9865 , alpha : 1.0 } ) , fillStyle: new FillStyle ({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 make public in html but I get a gray box and nothing else while swf is fine as ever?
@ Joseph:
You must also put the code in the HTML tag, The API Key.
That is, I = map.key and then we put all that string http:// .......?
I can not do it .... but where do I put all that html code with the key?
Hello to all,
if I wanted to use part of the stage for the map and for the remainder of the menu
would be possible to load the map in a movieclip defined area rather than opens across the Stage? How could I tell flash to load the map in the area defined by the symbol created?
thanks
Hello,
congratulations for the tutorial, I was really useful. I have a question for you (I'm not so experienced AS3): how do I move the map object on the Stage?
Thanks
@ Lorenzo: you can move it simply by acting on the stage, moving and resizing with the mouse. dell'oggetto, tipo: If you want to do this code you can use the properties
xandyof the object, type:2
y = 50 ; map. y = 50;
Hello My name is Patrick,
Your useful tutorial I was only now that I find myself in front of a little problem ...
If you export the movie and the text locally on Localhost charge me correctly the map instead lo hosto on a domain of aruba gives me this error:
2
swf location, version and network availability.
the html code of the page that looking on Google Guides 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 = "where we are"
align = "middle"
allowScriptAccess = "sameDomain"
allowFullScreen = "false"
type = "application / x-shockwave-flash"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
/>
</ object >
while my AS3 code is as follows:
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 .*; import com. google. maps. *;
google . maps . styles .*; import com. google. maps. styles. *;
google . maps . LatLng ; import com. google. maps. LatLng;
google . maps . Map ; import com. google. maps. Map;
google . maps . MapEvent ; import com. google. maps. MapEvent;
google . maps . MapType ; import com. google. maps. mapType;
google . maps . controls .*; import com. google. maps. controls. *;
google . maps . overlays .*; import com. google. maps. overlays. *;
: Map = new Map ( ) ; var map: Map = new Map ();
key= "ABQIAAAAA8CizyunDAeEXoQIb62lchT1OkJTPzIYI04p2bE9wlnkO_DE3RQZuRn-y9-4ljmnryrjNPH9EU48Eg" ; map. key = "ABQIAAAAA8CizyunDAeEXoQIb62lchT1OkJTPzIYI04p2bE9wlnkO_DE3RQZuRn-y9-4ljmnryrjNPH9EU48Eg";
/ / In this example, imposed on the size of the Google Map
/ / Same size as the movie. Alternatively, you can enter the
/ / 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 the 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 ( ) } ) ) ; new MarkerOptions ({icon: new myMarkerMovieClip ()}));
addOverlay ( m ) ; map. addOverlay (m);
addControl ( new PositionControl ( ) ) ; map. AddControl (new PositionControl ());
addControl ( new ZoomControl ( ) ) ; map. AddControl (new ZoomControl ());
addControl ( new MapTypeControl ( ) ) ; map. AddControl (new MapTypeControl ());
}
@ Patrick: If you work locally but not on the site of operation, the problem could be, as you indicated on the API key. The API key is tied to the domain of exercise of the map, then for each domain (such as
localhost) I need to generate a new one. In practice you need to generate a new API key for your domain and operating sostituila to that used inlocalhost.Thanks It should work now ... I did not realize that I had to create a domain for each API cm ² ... better late than never ... But now I have another problem ... I think I've done this over ...
You know the bar in another where you can change the display mode of the map, ie, for example, where you can switch between map satellite hybrid etc etc??
The visualize the bar and if I click on it all works correctly but the names on the buttons there are so I can not give a marine biotoxins of the button users ...
if I solve this thing make me a ENOOOOOORME pleasure ... XD
Thanks anyway the time I spend ...
Patrick
@ Patrick: What do you mean exactly with:
Do not get the label? That is, the button is just an empty gray rectangle? Because if so is some bug in Adobe Flash ... or I misunderstood?
@ Giovan Battista Fazioli: No you got it right ... It should be the label is a gray bar with no written work but it works ... boh ... please help me!?!?!?
@ Patrick: then 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" of the buttons added with
map . addControl ( new MapTypeControl ( ) ) ;seen and, among other things, it is difficult to commit error code on a line that simple. Ergo, something does not go to the lowest level, see versions of Flash Player installed on your browser, for example.Did you happen to see a web address where you can view all the map in question? If anything is a problem "your" local, and I see well?! Which would already be a step forward ...
@ Giovan Battista Fazioli: this is the address is http://www.daynightclub.it/prove2/dovesiamo.html
waiting for the link does not work ... now I load it somewhere else, and I tell you ...
@ Giovan Battista Fazioli: Here is the domain that works ... http://www.regalaunfiore.it/prova/dovesiamo.html
@ Patrick: I may have figured it out. You used the case for a "mask" - to make the edges rounded to the map! If so try to take it off!
Even I was capitatala the same thing, but I did not use masks.
I removed the label and nothing else.
@ Giovan Battista Fazioli: It benefits I used the mask but I need to cover some corners because I do not like the map squared so how can I fix??
@ Patrick: If removing the mask the defect continues (as indicated by Marco above), try to send me the source, who knows ... I might even illumination
Giovan Hello, I send you my fla to the problem of the label, where you can download it from the link is this:
http://www.valledelrieslingoltrepo.it/dovesiamo.fla
E 'was made with Fl cs5, I hope you manage to open it.
I can not understand where the problem is.
Forget the rest, images and everything is loaded from an external XML I have to do.
Thank you.
As I pointed out to Mark, try to do it all with CS4, the problem may be in 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, to limit open an issue to Google / Adobe
Maybe the problem is cs5, I now I have the cs4, this problem was also in cs4, cs5 I've installed about one month ago and the problem was already a few months ago when I made the site .
Here for example, I used the cs5 is the problem is not 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 the code inside, maybe the problem may lie in the markup of the page, type: encoding or the DOCTYPE, or in the statement
<object>/<embed>for example ...I congratulate Giovan Battista for tutorials, done really well ...
Thank you!
Hello to all,
Unfortunately, Google does not allow the use of the API for flash, but allows its use only with Java components ... possible?
There are other ways to integrate maps?
Great Tutorial!
I have a couple of things to ask.
1) how you can put different markers in the same map?
2) you can do so by hovering over a marker to appear the details related to that point on the map?
thanks