Fabio Biondi Blog » Blog Archive » Build a STORE LOCATOR using FLEX GOOGLE MAP (FX3)

Home » 3d parts libraries, Adobe, Flex 3, _Featured

Build a STORE LOCATOR using FLEX GOOGLE MAP (FX3)

11 August 2009 No Comment

I was playing with the Flex Google Map API and I think one of the coolest stuff is the Direction feature.

In few words, you can do a query like this: “from Milano to Torino” and you’ll get:
1) Distance
2) Trip duration
3) The complete travel displayed on Google Map
4) Many other usefull info (check GoogleMap website to get the API reference and other samples)

In this script I simulate a Store Locator, where user digits its city in a TextInput and at the same time he can selects a store from a List.
Each time user will change selection we’ll show the trip information (Distance + trip duration) displaying visual directions on the map too.

See a live demo

THE SOURCE CODE

Create a new Flex Project and copy all the following code inside your main mxml file.
Remember to download the GMap Flex SWC component and to copy it on your libs folder

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        xmlns:maps="com.google.maps.*" 
	layout="absolute" 
	width="100%" height="100%" >
 
 
   <mx:Script>
       <![CDATA[
       	import mx.events.ListEvent;
        import com.google.maps.interfaces.IPolyline;
        import com.google.maps.Map;
        import com.google.maps.MapEvent;
        import com.google.maps.LatLng;
        import com.google.maps.LatLngBounds;
        import com.google.maps.overlays.Marker;
        import com.google.maps.overlays.MarkerOptions;
        import com.google.maps.controls.ControlPosition;
        import com.google.maps.controls.MapTypeControl;
        import com.google.maps.services.*;
        import com.google.maps.MapAction;
 
        import mx.controls.Alert;
        import mx.collections.ArrayCollection;
 
        private var dir:Directions;
 
 
        /**
        * This method is called when the default Map is loaded 
        * 
        */
        private function onMapReady(event:Event):void {
            setupDirections();
            controlPanel.enabled = true;
        }
 
        /**
        * Define Direction class and its listeners 
        * 
        */
        private function setupDirections():void {    
 
            dir = new Directions();
            dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
            dir.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, onDirFail);
        }
 
 
        /**
        * Start a GMap Call to get distance between the selected store city and the user city 
        * 
        */
        private function processForm(event:ListEvent=null):void {
 
        	// Set Directions Options (see GMAP API doc for properties details)
            var opts:DirectionsOptions = new DirectionsOptions({locale: "English", travelMode: "driving", avoidHighways: false})
            dir.setOptions(opts);
 
            // GMAP Query: From ... To ... 
            dir.load("from: " + from.text + " to: " + storeCities.selectedItem.data);
 
            // Disable query panel
            controlPanel.enabled = false;
        }
 
        /**
        * Direction Wrong Query (i.e. a city wasn't found in the db)  
        * 
        */
        private function onDirFail(event:DirectionsEvent):void {
              Alert.show("Status: " + event.directions.status);
              controlPanel.enabled = true;
        }
 
        /**
        * Direction Query SUCCESSFULLY   
        * 
        */
        private function onDirLoad(event:DirectionsEvent):void {
 
        	// Enable Query Panel
        	controlPanel.enabled = true;
 
        	// Get Direction object
            var dir:Directions = event.directions;
 
            // Clear previous displayed directions 
            map.clearOverlays(); 
 
            // Display Directions on Map
            var directionsPolyline:IPolyline = dir.createPolyline();
            map.addOverlay(directionsPolyline);
            var directionsBounds:LatLngBounds = directionsPolyline.getLatLngBounds();
 
            // Fix map position
            map.setCenter(directionsBounds.getCenter());
            map.setZoom(map.getBoundsZoomLevel(directionsBounds));
 
       		// Display Markers (start and destination) 
            var numRoutes:Number = dir.numRoutes;
            var startLatLng:LatLng = dir.getRoute(0).getStep(0).latLng;
            var endLatLng:LatLng = dir.getRoute(numRoutes-1).endLatLng;
            map.addOverlay(new Marker(startLatLng));
            map.addOverlay(new Marker(endLatLng));
 
            // Display trip info
            infoTripTxt.htmlText = dir.summaryHtml;
        }
 
 
 
       ]]>
   </mx:Script>
 
   <maps:Map 
    id="map" 
    key="ABQIAAAA7QUChpcnvnmXxsjC7s1fCxQGj0PqsCtxKvarsoS-iqLdqZSKfxTd7Xf-2rEc_PC9o8IsJde80Wnj4g" 
    mapevent_mapready="onMapReady(event)"
    width="100%" height="100%"/>
 
   <mx:VBox width="395" height="200" id="controlPanel" enabled="false"
 		backgroundAlpha="0.8" backgroundColor="#FFFFFF">
 
	  <mx:HBox width="100%">
		   <mx:Label text="From (write your city):" fontWeight="bold"/>
		   <mx:TextInput
		     id="from"
		     text="Firenze"
		     width="100%" />
	  </mx:HBox>
 
	  <mx:HRule width="100%" />
 
	  <mx:Label fontWeight="bold"
		  text="To (select below the store and check the distance):"/>
 
	  	<mx:HBox width="100%" height="100%" verticalAlign="middle">
		    <mx:List id="storeCities" width="150"
		    	change="processForm(event)" height="121"> 
		        <mx:Object label="Milan - Outlet" data="Milan" />
		        <mx:Object label="Rome - Boutique" data="Rome" />
		        <mx:Object label="Napoli - Outlet" data="Napoli" />
		        <mx:Object label="Venezia - Shop" data="Venezia" />
		        <mx:Object label="Torino - Outlet" data="Torino" />
		    </mx:List>
 
		    <mx:TextArea width="220" height="60" fontSize="14" id="infoTripTxt" 
		    	backgroundAlpha="0" borderStyle="none"/>	
 
		</mx:HBox>
 
  </mx:VBox>
 
 
</mx:Application>