LetsFlex

google maps: controls

by jlagunas on Nov.25, 2008, under Google Maps

Don’t feel like using the default controls that google provides? Well here is an example on using a ComboBox component for the different map types and a VSlider for zooming in and out.

note: you will need to download the Google Maps API for Flash SDK.

 

MXML File

<?xml version="1.0" encoding="utf-8"?>
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" initialize="initializeHandler(event);" backgroundColor="0xffffff">

		<mx:Style>
			Label { font-weight: bold; }
		</mx:Style>

		<mx:Script>
			<![CDATA[
				import mx.controls.Alert;
				import mx.events.ResizeEvent;

				import com.google.maps.interfaces.IMapType;
				import com.google.maps.InfoWindowOptions;
				import com.google.maps.overlays.Marker;
				import com.google.maps.services.Placemark;
				import com.google.maps.services.GeocodingEvent;
				import com.google.maps.services.ClientGeocoder;
				import com.google.maps.controls.ZoomControl;
				import com.google.maps.MapType;
				import com.google.maps.MapZoomEvent;
				import com.google.maps.MapMouseEvent;
				import com.google.maps.LatLng;
				import com.google.maps.MapEvent;
				import com.google.maps.Map;

				private var map:Map;
				private var geocoder:ClientGeocoder;
				private var contentFormat:TextFormat;
				private var mapTypes:Array;
				private var currentMapType:Number;

				[Bindable]
				private var currentMapZoom:Number;

				private function initializeHandler(event:Event):void
				{
					map = new Map();
					map.key = "PLACE YOUR API KEY HERE";
					map.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
					map.addEventListener(MapZoomEvent.ZOOM_RANGE_CHANGED, updateMapZoom);

					mapComponent.addChild(map);
				}

				private function mapReadyHandler(event:MapEvent):void
				{
					currentMapZoom = 11;

					geoCoder(null);
					intMapType();
					intMapZoom();
				}

				private function geoCoder(event:Event):void
				{
					geocoder = new ClientGeocoder();
					geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocodingSuccessHandler);
					geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocodingFailureHandler);
					geocoder.geocode("1990 e grand ave el segundo ca 90245");
				}

				private function geocodingSuccessHandler(event:GeocodingEvent):void
				{
					var placeMarkers:Array = event.response.placemarks;

					if (placeMarkers.length > 0)
					{
						map.setCenter(placeMarkers[0].point, currentMapZoom);

						var marker:Marker = new Marker(placeMarkers[0].point);
						marker.addEventListener(MapMouseEvent.CLICK, markerClickHandler);

						function markerClickHandler(event:MapMouseEvent):void
						{
							contentFormat = new TextFormat();
							contentFormat.font = "Arial";
							contentFormat.size = 12;

							var address:String = placeMarkers[0].address;

							var infoWindow:InfoWindowOptions = new InfoWindowOptions();
							// USE REPLACE TO FIND THE FIRST COMMA AT THE END OF THE PHYSICAL ADDRESS
							// AND SWAP IT OUT WITH A NEW LINE FOR THE CITY, STATE, ZIP CODE AND COUNTRY
							infoWindow.content = address.replace(", ", "n");
							infoWindow.contentFormat = contentFormat;
							infoWindow.padding = 10;

							marker.openInfoWindow(infoWindow);
						}

					map.addOverlay(marker);

					}
				}

				private function geocodingFailureHandler(event:GeocodingEvent):void
				{
					Alert.show("can not locate: " + event.name);
				}

				private function mapResizeHandler(event:ResizeEvent):void

				{
					map.setSize(new Point(mapComponent.width, mapComponent.height));
				}

				private function intMapType():void
				{
					mapTypes = new Array(MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE, MapType.PHYSICAL_MAP_TYPE);

					if(!currentMapType)
						currentMapType = 0;

					mapType.dataProvider = mapTypes;
					mapType.labelFunction = getMapTypeLabels;
					mapType.selectedIndex = currentMapType;

					map.enableScrollWheelZoom();
					map.enableContinuousZoom();
				}

				private function mapTypeChangeHandler():void
				{
					currentMapType = mapType.selectedIndex;
					map.setMapType(IMapType(mapTypes[currentMapType]));
				}

				private function getMapTypeLabels(item:Object):String
				{
					return IMapType(item).getName();
				}

				private function intMapZoom():void
				{
					mapZoomSlider.minimum = map.getMinZoomLevel();
					mapZoomSlider.maximum = map.getMaxZoomLevel();
					mapZoomSlider.allowTrackClick = true;
				}

				private function mapZoomChangeHandler():void
				{
					currentMapZoom = mapZoomSlider.value;

					if(map.isLoaded())
						map.setZoom(currentMapZoom);
				}

				private function updateMapZoom(event:MapEvent):void
				{
					currentMapZoom = map.getZoom();
					mapZoomSlider.value = currentMapZoom;
				}

			]]>
		</mx:Script>

		<mx:UIComponent id="mapComponent" width="100%" height="100%" resize="mapResizeHandler(event);" />

			<mx:ComboBox id="mapType" change="mapTypeChangeHandler();" fillColors="[0xFFFFFF, 0xFFFFFF]" fillAlphas="[1,1]" toolTip="Map Type" top="10" right="10" />

			<mx:Box left="10" top="10" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" backgroundColor="0xffffff" borderStyle="solid" cornerRadius="5">
				<mx:VSlider id="mapZoomSlider" change="mapZoomChangeHandler();" value="{currentMapZoom}" dataTipPlacement="right" liveDragging="true" tickLength="0" snapInterval="1" toolTip="Map Zoom Slider" />
			</mx:Box>

	</mx:Application>
:, , , , , ,
1 comment for this entry:
  1. Mig

    Nice work, good script ;)

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...