How to use Google Maps API with Flash AS3 – part 2

This time I am going to show you how to add to your Flash Google Map the controls you are used to see in all maps, such as map type, zoom and overview.

You will find, looking at this example and next ones, Google Maps can be customized in a wide range of ways.

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

This time the code is six lines longer

1
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

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;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.controls.OverviewMapControl;
	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.SATELLITE_MAP_TYPE);
				map.addControl(new ZoomControl());
				map.addControl(new OverviewMapControl());
				map.addControl(new MapTypeControl());
			}
		}
	}
}

Line 9: MapTypeControl provides a control for selecting and switching between supported map types via buttons. The classic Map, Satellite, Hybrid, Terrain menu.

Line 10: ZoomControl contains buttons for zooming the map in and out and a zoom slider.

Line 11: OverviewMapControl shows a small map in the corner of the containing map and displays a rectangle representing the containing map viewport. The rectangle can be dragged, or the overview map can be dragged to update the viewport.

Line 21: Adding the zoom control

Line 22: Adding the overview control

Line 23: Adding the map type control

And the map now looks like this one:

Next time we’ll see how to change the look of buttons and other visual tricks

Download the source code.

Rate this post: (5 votes, average: 4.20 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

4 Responses

1. Weekly Shared Items - 20. March, 2009 | toxin 2.0 - weblog of a german design student from wuerzburg says:

   March 20, 2009 at 7:30 am

   [...] How to use Google Maps API with Flash AS3 – part 2 [...]

   Reply
2. Giuseppe Sorce says:

   April 2, 2009 at 9:14 am

   thank you for this tutorial but i have some problem with Google Map and Adobe AIR, when i create a file .air file with same code the map don’t load

   Reply
3. Anwar says:

   June 11, 2009 at 6:01 am

   Hi, awesome tutorial, i managed to create a flash swf with a google map. However i was wondering if i could add in a marker and zoom in to the location which is my LatLng . Thank you

   Reply
4. saravanan says:

   August 14, 2010 at 8:21 am

   Hi, awesome tutorial, i managed to create a flash swf with a google map. But i need extra features,pls help . How to create search option using text box and button. Thank you

   Reply