Flex and GoogleMaps

We can integrate flex and Googlemaps very easily, for that we need following things.
                 1 . Google Maps API Key.(Click here )
                 2.  Google Maps Action Script component(Click here)
After you have created your account with google maps ,it will generate an API key,please copy and save it in note pad and name it as "apikey".
I will explain step by step,
 1.  Creating flex project
   Open flex builder3-->File-->New-->FlexProject-->Name is as "Demoflexmaps" -->Select 
application type as "Desktop application" -->click on save.
2.  Copying files to flex project
        1.  Copy the "apikey" file and save it to src folder of your flex project.
        2.  From downloaded zip file copy "map_flex_1_5.Swf" to your flex project "lib" folder
3. Creating flex-googlemaps
  Here i am giving MXML component file code, you can understand it by comments given by me.Copy 
this code in your source MXML file.
=================================================================
        <?xml version="1.0" encoding="utf-8"?>

<!-- http://blog.flexexamples.com/2008/08/03/using-google-maps-in-a-flex-project/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import com.google.maps.LatLng;
            import com.google.maps.Map;
            import com.google.maps.MapEvent;
            import com.google.maps.controls.MapTypeControl;
            import com.google.maps.controls.PositionControl;
            import com.google.maps.controls.ZoomControl;
            import com.google.maps.services.ClientGeocoder;
            import com.google.maps.services.GeocodingEvent;
            import com.google.maps.services.GeocodingResponse;
            import com.google.maps.services.Placemark;
            import mx.controls.Alert;
            import mx.events.ResizeEvent;

            private var googleMap:Map;
            private var geocoder:ClientGeocoder;

            private function init():void {
                googleMap = new Map();
                googleMap.key = APP_ID;// we are assiging apikey,which is in apikey file.
                googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
                googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
                googleMap.addControl(new ZoomControl());
                googleMap.addControl(new MapTypeControl()); 
                mapContainer.addChild(googleMap);
            }

            private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
                var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
                googleMap.setCenter(result.point, 13);
            }

            private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
                Alert.show("Unable to geocode address: " + evt.name);
            }

            private function googleMap_mapReady(evt:MapEvent):void {
                geocoder = new ClientGeocoder();
                geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
                geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
                geocoder.geocode(textInput.text);
            }

            private function button_click(evt:MouseEvent):void {
                geocoder.geocode(textInput.text);
            }
            
            private function mapContainer_resize(evt:ResizeEvent):void {
                if (googleMap) {
                    googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
                }
            }
        ]]>
    </mx:Script>

    <mx:String id="APP_ID" source="apikey.txt" /> // here we are accessing your apikey file.

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Address:"
                    direction="horizontal">
                <mx:TextInput id="textInput"
                        text="Hyderabd,India" /> // here we are giving default address.
                <mx:Button id="button"
                        label="Submit"
                        click="button_click(event);" /> 
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:UIComponent id="mapContainer"
            width="100%"
            height="100%"
            resize="mapContainer_resize(event);" />
 

</mx:Application> 
===================================================================
save and run the program (Ctrl+F11),then you can find following output.