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: (4 votes, average: 4.00 out of 5)

 Loading ...

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