Build a STORE LOCATOR using FLEX GOOGLE MAP
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
But you can do more... check the Google Map Api web site for more info
and remember to sign up for a key or you won't be able to use GMAP on your web site
FLEX 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
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
But you can do more... check the Google Map Api web site for more info
and remember to sign up for a key or you won't be able to use GMAP on your web site
FLEX 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>
<!--DEBUG KEY: you need to sign up for your own key-->
<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>