• 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.

View MXML

<?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();">

    <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;
                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="appid.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Address:"
                    direction="horizontal">
                <mx:TextInput id="textInput"
                        text="601 Townsend St, San Francisco, CA 94103" />
                <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>

View source is enabled in the following example.

For more information and examples, see the “Google Maps API for Flash homepage”.

 

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/03/using-yahoo-maps-in-a-flex-project/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.controls.Alert;

            import com.yahoo.maps.api.YahooMap;
            import com.yahoo.maps.api.YahooMapEvent;
            import com.yahoo.maps.api.core.location.Address;
            import com.yahoo.maps.webservices.geocoder.GeocoderResult;
            import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent;

            private var yahooMap:YahooMap;
            private var address:Address;

            private function init():void {
                yahooMap = new YahooMap();
                yahooMap.init(APP_ID, mapContainer.width, mapContainer.height);
                yahooMap.addPanControl();
                yahooMap.addZoomWidget();
                yahooMap.addTypeWidget();
                mapContainer.addChild(yahooMap);

                geocodeAddress(textInput.text);
            }

            private function geocodeAddress(value:String):void {
                address = new Address(value);
                address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, address_geocoderSuccess);
                address.addEventListener(GeocoderEvent.GEOCODER_FAILURE, address_geocoderFailure);
                address.geocode();
            }

            private function address_geocoderSuccess(evt:GeocoderEvent):void {
                var result:GeocoderResult = Address(evt.target).geocoderResultSet.firstResult;
                yahooMap.centerLatLon = result.latlon;
                yahooMap.zoomLevel = result.zoomLevel;
            }

            private function address_geocoderFailure(evt:GeocoderEvent):void {
                Alert.show("Unable to geocode address: " + address.address);
            }

            private function mapContainer_resize(evt:ResizeEvent):void {
                if (yahooMap) {
                    yahooMap.setSize(mapContainer.width, mapContainer.height);
                }
            }

            private function button_click(evt:MouseEvent):void {
                geocodeAddress(textInput.text);
            }
        ]]>
    </mx:Script>

    <mx:String id="APP_ID" source="appid.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Address:"
                    direction="horizontal">
                <mx:TextInput id="textInput"
                        text="601 Townsend St, San Francisco, CA 94103" />
                <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>

View source is enabled in the following example.

For more information and examples, see the “Yahoo! Maps ActionScript 3.0 Component homepage”.