Wednesday, September 1, 2010

GOOGLE MAPS API in flex

Simple steps to integrate Google Maps Api and customize markers in flex code.

1. Sign up for an APP-ID at http://code.google.com/apis/maps/signup.html
     - An APP-ID is a unique id which is linked to the webpage you are trying to embed the google map in. Basically, Google has a map-id linked to the webpage you are creating. This is needed in order to display the map onto your webpage. In the event that you are creating a local flex application, no APP-ID is needed to be generated( just keep any string as your APP-ID).

2. Obtaining the Interface Library
    Developing Flash content that integrates Google Maps requires inclusion of a Google Maps API for Flash interface library within your application code. This library consists of a *.swc file within the lib directory of the Maps API for Flash SDK available at the following URL:
The SDK includes two SWC files: a Flex version for use within FlexBuilder (or with the free Flex SDK), and a non-Flex version for use within Flash CS3. The Flex*.swc is denoted with a _flex suffix in the filename.
These SWC files contain interfaces for all public classes in the Google Maps API for Flash development environment. Compiling your application with this library ensures that it can utilize and communicate with all public functionality of the runtime Google Maps API for Flash library, which is retrieved from Google's servers whenever a client loads your application.
3. Import the packages using codes: 
                                import com.google.maps.controls.*;
                                import com.google.maps.overlays.*;
etc.
4. Code snippet to Initialize your googleMap.
     -                          googleMap = new Map();
googleMap.key = APP_ID; // your APP-ID which is generated by Google comes here
googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
googleMap.addControl(new ZoomControl()); // adds the zoom functionality
googleMap.addControl(new MapTypeControl());  // adds the functionality to change the types of Maps
                                mapContainer.addChild(googleMap);
5. Placing markers on your map.
   -  Placing markers at points on your maps need to import com.google.maps.services.*
     Use the following functions to add markers on the map:
[Bindable]
public var dp:ArrayCollection; // dp is the data-provider, which consists of objects having latitude and longitude information
[Bindable]
public var markerProvider:ArrayCollection = new ArrayCollection;
 // markerProvider is arrayCollection, which consists marker information

private function loadmarkers():void
{    
           for(int i=0;i<dp.length;i++)
{
var lat = dp.getItemAt(i).lat;
var lng = dp.getItemAt(i).lng;
var MarkerData:Object = {lat:lat,lng:lng};
markerProvider.addItemAt(MarkerData,i);
markerProvider.refresh();
var markerOptions:MarkerOptions = new MarkerOptions();
markerOptions.label = (i+1).toString();
markerOptions.hasShadow = true;
markerOptions.draggable = false;
markerOptions.fillStyle = new FillStyle({color:Color.GREEN, alpha:0.8});
var marker:Marker = new Marker(new LatLng(lat,lng),markerOptions);
marker.addEventListener(MapMouseEvent.CLICK, markerClicked);
googleMap.addOverlay(marker);
}
}

//markerClicked is a function which displays the information when a marker is clicked.
public function markerClicked(event:MapMouseEvent):void
{
var marker:Marker = event.target as Marker;
var i:int;
var m_lat:Number;
var m_lng:Number;
for(i=0;i<markerProvider.length;i++)
{
var matchedObject:Object = markerProvider.getItemAt(i);
if(matchedObject.lat==marker.getLatLng().lat() && matchedObject.lng==marker.getLatLng().lng())
{
m_lat = matchedObject.lat;
m_lng = matchedObject.lng;
}
}
showThePopUpComponent(m_lat,m_lng,); // create a popup to show the marker-info
}

No comments: