Create Google Maps Flex application using Google Maps API
Posted on February 26, 2010 | No Comments
Google maps is a powerful tool that provides a huge range of mapping services like street directories, directions, searches, satellite views and more. All of this power is made available to Flex developers through a Flash/Flex API supplied and supported by Google. This tutorial will show you how to embed a Google Map into a Flex application.
Step 1
You will need an Google Maps API key, which you can get from here. Each domain where your application is uploaded requires a unique key. If you try and reuse a key between domains you’ll get the error “Initialization failed: please check the API key, swf location, version and network availability.”
Step 2
Create a new Flex application, and add the map_flex_1_16.swc (the suffix 1_16 will change between versions) file to the Flex Build Path. This file can be found under the libs directory in the SDK.
Step 3
Add a Map3D element as a child of the Application element.
<maps:Map3D xmlns:maps="com.google.maps.*" mapevent_mappreinitialize="onMapPreinitialize(event)" mapevent_mapready="onMapReady(event)" id="map" width="100%" height="100%" key="YourGoogleMapsAPIKey"/>
mapevent_mappreinitialize sets the onMapPreinitialize(event) function to be called before the map is initialised. It is here that we will set the options that define the maps appearance.
mapevent_mapready sets the onMapReady(event) function to be called once the map has been initialised. It is here that we will add the map controls.
key is where you supply your Google Maps API key that you obtained in step 1.
Step 4
Add a button and a TextInput element. These will be used to move the map to a new location.
<mx:TextInput id="search" bottom="10" right="83"/> <mx:Button label="Search" click="doSearch(event)" right="10" bottom="10"/>
click sets the doSearch(event) function to be called when the button is clicked.
You should now have a GUI that looks something like the screenshot below.
Step 5
Add a Script element to the Application element. This is where we will add the ActionScript code.
<mx:Script> <![CDATA[ // code goes here ]]> </mx:Script>
Step 6
Import the following packages.
import mx.controls.Alert; import com.google.maps.*; import com.google.maps.overlays.*; import com.google.maps.services.*; import com.google.maps.controls.*; import com.google.maps.*; import com.google.maps.geom.*;
Step 7
Add a new function called onMapPreinitialize. It is here that we will set up the appearance of the map before it is displayed for the first time.
private function onMapPreinitialize(event:MapEvent):void
{
var myMapOptions:MapOptions = new MapOptions();
myMapOptions.zoom = 12;
myMapOptions.center = new LatLng(40.756054, -73.986951);
myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
myMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
myMapOptions.attitude = new Attitude(20,30,0);
map.setInitOptions(myMapOptions);
}
We create a new MapOptions object. The properties of this object will define the appearance of the map.
The zoom property defines how close to the ground the map will be.
The center property defines the latitude and longitude where the map will be centered.
The mapType property defines what is shown on the map. You can find more map types here.
The viewMode property defines whether the map is 2D or 3D. Here we set it to perspective, which allows us to pan, tilt and rotate the camera. Other view types can be found here.
The attitude property defines the initial 3D orientation of the camera. The first parameter is the yaw, the second is the pitch, and the third is the rotation. Here we set the camera slightly off center to show the 3D effect.
Finally we supply the MapOptions object to the Map via the setInitOptions function.
Step 8
Add a new function called onMapReady. It is here that we will add the map controls.
private function onMapReady(event:MapEvent):void
{
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
The ZoomControl is a slider that allows you to zoom in and out.
The PositionContorl allows you to slide the map around.
The MapTypeControl allows you to select between the Map, Terrain, Satellite and Hybrid views.
<strong>Step 9</strong>
The final function is doSearch. This is called when the Search button is clicked.
private function doSearch(event:Event):void
{
var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void
{
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0)
{
map.flyTo(placemarks[0].point, 12, new Attitude(20,30,0), 3);
var marker:Marker = new Marker(placemarks[0].point);
marker.addEventListener(MapMouseEvent.CLICK,
function (event:MapMouseEvent):void
{
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
}
});
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void
{
Alert.show("Geocoding failed");
});
geocoder.geocode(search.text);
}
First a new ClientGeocoder object is created. This object is used to search for an address or location.
We then attach an anonymous function to be called on the GEOCODING_SUCCESS event. In this function we call the flyTo function to animate the map to the new latitude and longitude, zoom and attitude. We also create a Marker, which when clicked will display the location that was found.
If no location could be matched to the search query the GEOCODING_FAILURE event is triggered. Again we attach an anonymous function to this event, this time simply alerting the user that no match was found.
Finally we call the geocode function, which will attempt to match the search query with a location, and trigger either the GEOCODING_SUCCESS or GEOCODING_FAILURE events.
Final code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="480"
height="384">
<maps:Map3D
xmlns:maps="com.google.maps.*"
mapevent_mappreinitialize="onMapPreinitialize(event)"
mapevent_mapready="onMapReady(event)"
id="map"
width="100%"
height="100%"
key="ABQIAAAAQMOJdDzw75wezt4RVnH6QxSb09gpeLrqxT0Ma2mV_FWvSU4c0hQLGwxJWmiooRjEFOiJojwo8r-J4w"/>
<mx:TextInput id="search" bottom="10" right="83"/>
<mx:Button label="Search" click="doSearch(event)" right="10" bottom="10"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.google.maps.*;
import com.google.maps.overlays.*;
import com.google.maps.services.*;
import com.google.maps.controls.*;
import com.google.maps.*;
import com.google.maps.geom.*;
private function onMapPreinitialize(event:MapEvent):void
{
var myMapOptions:MapOptions = new MapOptions();
myMapOptions.zoom = 12;
myMapOptions.center = new LatLng(40.756054, -73.986951);
myMapOptions.mapType = MapType.NORMAL_MAP_TYPE;
myMapOptions.viewMode = View.VIEWMODE_PERSPECTIVE;
myMapOptions.attitude = new Attitude(20,30,0);
map.setInitOptions(myMapOptions);
}
private function onMapReady(event:MapEvent):void
{
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}
private function doSearch(event:Event):void
{
// Instantiate a Geocoder
var geocoder:ClientGeocoder = new ClientGeocoder();
// Add an event listener for a GEOCODING SUCCESS
geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void
{
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0)
{
map.flyTo(placemarks[0].point, 12, new Attitude(20,30,0), 3);
var marker:Marker = new Marker(placemarks[0].point);
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void
{
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
}
}
);
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void
{
Alert.show("Geocoding failed");
}
);
geocoder.geocode(search.text);
}
]]>
</mx:Script>
</mx:Application>
Conclusion
Using Google Maps from your Flex application is made incredibly simple with the Flex API, but can add a incredible amount of functionality to any location aware applications.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.