03
Aug
08

Using Google Maps in a Flex project

The following example shows how you can embed a Google map into a Flex/ActionScript 3.0 project.

Full code after the jump.

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:

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


21 Responses to “Using Google Maps in a Flex project”


  1. 1 jarodinou Aug 4th, 2008 at 1:21 am

    Nice example !
    You can see another example of an app using Google Maps here :
    http://beta.navx.com/en/

  2. 2 fox Aug 4th, 2008 at 1:33 am

    very cool!!!

  3. 3 Owen Aug 4th, 2008 at 2:25 am

    Why google Map Status is Debug?

  4. 4 Steve Aug 4th, 2008 at 11:38 am

    Thanks for the example, Peter.

    @Owen - you’re getting the debug message because you’re running the flex app on localhost. If you upload your resulting swf to be served from beneath the domain you gave when you registered for an API key, you’ll find that the debug message is gone (and GeoCoding works)

  5. 5 Sean Halliday Aug 6th, 2008 at 7:46 am

    I would love a tutorial on how they did this:

    http://beta.navx.com/en/

    Sean B. Halliday

  6. 6 Jon Danao Aug 7th, 2008 at 12:02 am

    Hi! This is a shameless plug. I’m also building a series of tutorials utilizing GoogleMaps in Flex.

    http://danao.org/2008/05/28/google-maps-flex-basic/
    http://danao.org/2008/08/06/google-maps-flex-with-overlays/

    Cheers! :)

    Jon

  7. 7 cyberoverdose Aug 13th, 2008 at 9:31 am

    i don’t get one thing with the appid.txt are there any quotes or anything u have to put around key?

  8. 8 peterd Aug 13th, 2008 at 10:02 am

    cyberoverdose,

    No, you just need to sign up for your own API key and then paste it into that file (without quotes).

    Peter

  9. 9 d3zign7reak Aug 14th, 2008 at 12:23 pm

    I keep getting a 1046 error for all the events (Geocoding Event and Map Event). The error is specifically for the event functions geocoder_geocodingSuccess, geocoder_geocodingFailure, googleMap_mapReady. Not sure what the problem may be?

  10. 10 d3zign7reak Aug 14th, 2008 at 1:02 pm

    oh, ok I got it to work. I thought you needed to create a libs folder within assets. However, I just realized you could use the libs folder that automatically is built by Flex Builder 3. Thanks for the example. This site is made of delicious awesomeness!

  11. 11 ramya Aug 22nd, 2008 at 11:08 pm

    wat did i do,run my googlemap in localhost,that means i got o/p in debugmode,how it go out

  12. 12 peterd Aug 23rd, 2008 at 2:37 am

    ramya,

    To get rid of the debugmode, I believe you need to upload the SWF file to a webserver.

    Peter

  13. 13 ramya Aug 26th, 2008 at 2:47 am

    Thank u Mr.Peterd,but tell me the process,wat m doing?,i ve no idea abt that

  14. 14 ramya Aug 26th, 2008 at 2:57 am

    And how to give the all lat&lang dynamically for particular city in one country(eg:France,in this lot of cities r present,when i clicked particular city on combobox like ‘NICE’,it shows ‘NICE’ city on France map),

  15. 15 ramya Aug 26th, 2008 at 3:03 am

    i got one idea,in XML gives all lat&lang&call it by using or ,is it correct r not?

  16. 16 ramya Aug 26th, 2008 at 5:22 am

    create XML,
    call it by using websevice or httpservice

  17. 17 Matt Sep 1st, 2008 at 9:21 am

    Hi.

    this site is awesome, thank you! :)

    I’ve tried the map demo. On localhost, it showed the debug mode, which is to be expected.
    When I uploaded it to the server, the container is visible, but displays this message:

    Initialization failed: please check the API key,
    swf location, version and network availability.

    Any ideas?

    Many thanks,

    Matt

  18. 18 peterd Sep 1st, 2008 at 10:46 pm

    Matt,

    And you pasted your Google Maps API key in appid.txt?

    Peter

  19. 19 Matt Sep 2nd, 2008 at 2:06 am

    Hi Peter.

    Thank you for your reply.

    Yes, the API key is included in the appid.txt file.

  20. 20 peterd Sep 2nd, 2008 at 8:13 am

    Matt,

    I haven’t seen that error before (but I’ve only tried a few simple things with Google Maps).
    Does this help? http://groups.google.co.ke/group/Google-Maps-API/browse_thread/thread/afb8173049b08cee?fwc=1

    Peter

  21. 21 Tom Sep 5th, 2008 at 3:44 am

    Cool, like the map blinds when I resize it, I add a lazy resize:

    private var _lazy_resize_timer:uint = 0;
    
    private function mapContainer_resize(evt:ResizeEvent):void
    {
        if (googleMap)
        {
            clearTimeout(this._lazy_resize_timer);
            this._lazy_resize_timer = setTimeout(_do_lazy_resize,50);
        }
    }
    
    private function _do_lazy_resize():void
    {
        googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
    }
    

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".