Tutorial: Including Google Maps in an Adobe Flex application

August 17, 2009

It is really easy to add Google Maps in your Flex Application. In order to do so you need to follow these steps.

  1. Open the Adobe Flex Builder.
  2. Select File / New / Flex Project.
  3. Type the project name (e.g.: GoogleMaps), then make sure to select “Web Application” and “server type = None”.
  4. Click Next, select output folder, click Next, and then click Finish.
  5. Download the Google Maps library file from: http://maps.googleapis.com/maps/flash/release/sdk.zip. This file contains two library files (swc) and a complete documentation. You need to extract the swc with the “_flex” suffix in your project’s lib folder. The other swc file is for Adobe Flash CS3 projects.
  6. Add the Google namespace in your application:

    1

    xmlns:maps="com.google.maps.*"

  7. Obtain a free Maps API Key from:  http://code.google.com/apis/maps/signup.html. You’ll need to read and agree with the terms and conditions and then enter the domain where the swf will be hosted. Important, the API key is compiled into the SWF file and must match the domain where the SWF file is hosted, otherwise the maps will throw an errow. After you select the “generate API key” button you will be asked to login to your google (gmail) account. If you don’t have one you may need to get a free one.
  8. Copy your key string. It will look something like this:

    1

    ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw

  9. Add a map tag to your application with the following mxml tag:

    1
    2

    <maps:Map id="map" width="100%" height="100%"
    key="ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw"/>

    Make sure to use the key you just generated.

  10. Build the application and you’ll get something like this (right click to view source):

Customizing your map

You can customize your map in several ways.

  1. Start by adding a listener for the event mapevent_mapready on your map tag.

    1
    2

    <maps:Map id="map" width="100%" height="100%"  mapevent_mapready="onReadyMap()"
    key="ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw"/>

  2. On the map ready event you could add different features such us:
    • Set the initial position of the map
    • Add zoom control
    • Add a marker
    • Allow scrolling using the mouse wheel

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    public function onReadyMap():void
    {
    //set initial position
    map.setCenter(new LatLng(38.970353, -84.679638), 10, MapType.NORMAL_MAP_TYPE);
     
    //zoom control
    var zoom:ZoomControl = new ZoomControl()
    zoom.scaleX=1.2;
    zoom.scaleY=1.2;
    zoom.x=0;
    zoom.y=0;
    map.addControl(zoom);
     
                    //allow scroll with mouse wheel
    map.enableScrollWheelZoom();
     
    //adding a marker
    var m:Marker = new Marker(new LatLng(38.970353, -84.679638),
    new MarkerOptions({
    fillStyle: new FillStyle({alpha: 0.75,color: 0x00ff00}),
    hasShadow: true,
    radius: 10,
    strokeStyle: new StrokeStyle({alpha: 0.75,color: 0x0000ff,thickness: 1}),
    tooltip: "Anden Solutions, LLC"})
    );
    map.addOverlay(m);
     
    }

  3. You can see the results in the following map:

For more information visit the Google Maps API.

Add new comment

Image CAPTCHA
Enter the characters shown in the image.

some stats

38
lunches with clients this year
23
dances in the rain this year (very rainy!)
12208
songs in our music library
25
graphic pieces created this month
9
carafes of coffee per day
15
dog walks this month (and counting)