Develop Google Map application with Flex

Flex profile

Flex is an open source framework that abode companies contribute to quickly build and maintain highly interactive and expressive Internet applications (Rich Internet application). These RIA applications can be deployed either through Adobe Flash Player to all major browsers or through AIR (Adobe integrated Runtime) on all major operating system desktops.

A Flex application usually consists of ActionScript and MXML two of code. ActionScript is an object-oriented scripting language that conforms to the ECMASCRIPT standard for implementing the logic of flex applications; MXML is a markup language similar to HTML and XML used to build the user interface for flex applications. The Flex application eventually needs to be compiled into a SWF file to run on Adobe Flash Player or AIR.

Google Maps API for Flash Introduction

Google Maps API for Flash enables flex developers to embed Google maps into flex applications. The API provides a number of useful tools for manipulating Google maps. With this API, you can handle map events, add map controls, add tags to a map, or draw lines on a map, or use Geocoding to convert addresses to latitude data. During the writer's writing, Google Maps API for Flash does not support the AIR environment and can only be run in Flash Player.

Build a development environment

To develop flex applications, you need to install the Flex SDK or Flex Builder. The former is open source software, does not provide the IDE interface, you need to use the command line to compile mxml and Acitionscript code, which is based on Eclipse, a Flex IDE, provides such as code hints, Auto-complete, Flex application debugging, and many other convenient features. This article will take Flex Builder as an example to introduce how to build a flex development environment to develop the Google maps application.

Apply for Google Maps API key

First you need to go to Google site to apply for a free Google Maps API key. It prompts you to enter "My web site URL", for the sake of native testing, we enter the local address "http://127.0.0.1", and then click on the Confirmation button will see the Application key. Note If you want your map application to run on your own site, you need to fill out the real site domain name.

Download Google Maps API for Flash SDK

Go to google site to download Google Maps API for Flash SDK to the local hard drive and unpack. After decompression, there will be two SWC files in the Lib directory, which contain all the ActionScript classes that are used to develop the Google Maps API for Flash applications. When developing a Google map application with Flex, you must add a SWC file with a suffix of _flex to your project's Library path.

Library Path to configure Flex engineering

Suppose you already have Flex Builder (you can download the Flex Builder beta from the Adobe Web site). Turn on Flex Builder to create a new Flex project. Because the current Google Maps API for Flash does not support AIR, the application type is chosen as the Web application. After you create the Flex project, right-click on the project and select Properties in the pop-up menu. Select Flex build path in the Properties window and select Library Path, and click on the Add SWC button to select the MAP_FLEX_*.SWC file you extracted before you extract it, as shown in Figure 1.

Figure 1. Library Path to configure Flex engineering

Here, the environment is ready, and then you can start using Flex Builder to develop the Google maps app.