Google Maps and Adobe Flex

oday i had some free time besides my usual work, so thought of implementing a new contact page in my blog. After thinking for a while, i came with up google maps to show my entire address. you can find a lot of articles across the globe over how to intergate Google API with Flex , JavaScript and variours other language. This tutorial is a basic setup, and you can look into google documentation for further features.

Before getting started, you need to first get an API key from Google and then download the mapping component and put it in your /libs/ folder in your Flex Builder 3 project:

• Click here to get Google Maps API key.
• Click here to download the Google Maps ActionScript 3.0 component.
• Copy the map_flex_1_5.swc file from the .ZIP file’s /lib/ directory and copy it into your Flex Project’s /libs/ directory.

Now lets begin the coding arena. I will explain each and every line as it would be much better for new comers to get in touch with the tutorial.

1. We are creating the Application tag and setting up an event. We are also setting up the height and width. Now we are loading down the UI component which is used to load the entire map. The ID given to UI component will later on be in use to reference.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
width=”100%” height=”100%” initialize=”init()”>

<mx:UIComponent id=”mapContainer” width=”100%” height=”100%”/>
</mx:Application>

2. We are loading the neccessary classes and then declaring a private varibale which will reference the Map instance.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
width=”100%” height=”100%” initialize=”init()”>

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

private var googleMap:Map;
<mx:UIComponent id=”mapContainer” width=”100%” height=”100%”/>
</mx:Application>

3. We are then creating a init function, which is loaded during the flex app. Initialization of the map is done. We are then setting up our API key which we have got from google. The next step is adding an even handler for when the map is fully loaded and the final step is to attach ther map to an container.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
width=”100%” height=”100%” initialize=”init()”>

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

private var googleMap:Map;

private function init():void
{
googleMap = new Map();
googleMap.key = “{YOUR_API_KEY_HERE}”;
googleMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

mapContainer.addChild(googleMap);
}

<mx:UIComponent id=”mapContainer” width=”100%” height=”100%”/>
</mx:Application>

4. Now we have the final part of code, where we call the event handler when the map is fully loaded. This bloded code centers the map coordinates and sets the height and width of the application.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
width=”100%” height=”100%” initialize=”init()”>

<mx:Script>
<![CDATA[

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;

private var gMap:Map;

import mx.managers.PopUpManager;
[Bindable]
public var source:Object;

private function init():void
{
gMap = new Map();
gMap.key = “{YOUR_API_KEY_HERE}”;
gMap.width = 600;
gMap.height = 400;
gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);

mapContainer.addChild(gMap);
}

private function mapReadyHandler(e:MapEvent):void
{
gMap.setCenter(new LatLng(42.334184,-71.018372), 13, MapType.HYBRID_MAP_TYPE);
gMap.setSize(new Point(mapContainer.width, mapContainer.height));
}

]]>
</mx:Script>
<mx:UIComponent id=”mapContainer” width=”100%” height=”100%”/>
</mx:Application>

That’s it, We have finally loaded a google Map. Now try to locate your address. In my next series of tutorials in google Map, i will try to add more feautears related to search the map, icons etc etc. Till then its a bye from Vinothbabu.

You can view the DEMO here

Popularity: 40% [?]