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:

April 10th, 2009 on 3:17 am
Nice work, good script