nwebb

To play around with the AS3 GoogleMaps API you need to get a developer key. If you are testing your app locally on your machine (and you haven’t got a local server installed) chances are you will see the words “Debug Mode” plastered mercilessly over your map, and when you try out an asynchronous operation such as geocoding* you will get an error.

This is because you specified a particular URL when you applied for your key, but you are not testing from that location. To get around this you could upload the .swf to your remote server** every time you want to test something, or you could install a server locally on your computer. This is something that not everyone will be familiar with (and some people may be scared of doing) so here’s a post to set you on the right road.

The steps are to install a server (here I’ll use all-in-one software installs to make things easy), then to apply for a new key, and finally to set some properties for your Flex project.

Choose Which Server/Package To Use
I decided to install the free developer version of ColdFusion 8 in to my C directory on Windows ( i.e. the path to the directory would be: C:/ColdFusion8 ). Alternatively, you could install Apache; if so your best bet may be to use XAMPP which is an all-in-one Apache distribution containing MySQL, PHP and Perl, and if I remember correctly has a really easy installation process.

The ins and outs of the installation processes for different servers are beyond the scope of this blog-post, but you’ll find plenty of help on the web should you get stuck.

Apply For A New GoogleMaps Developer Key
Now you need to apply for a new key. The URL you specify will vary depending on what server you installed. When you install a server the default ‘homepage’ is http://localhost (or 27.0.0.1) – this is what you would type in to your browser’s address bar to check that the server is installed and running, and if the server runs on a particular port other than the default, you add a colon and then the port number. ColdFusion runs on port 8500, so when you apply for the GoogleMaps key, the URL will be http://localhost:8500 . PHP on the other hand would just require the url http://localhost (without any port number). Once you have the new key, that is the one you have to use in your project when testing on your local server (don’t forget!).

Set Up Your Flex Project Properties
Each time you run your application you’ll want it to publish to a location on your server. I covered this in a recent post. We need to change the Output Folder and Output Folder URL in our project properties.

The Output Folder is where you want the files published. If you installed ColdFusion8 to C:/ColdFusion8 then set the value of this field to C:/ColdFusion8/wwwroot (as wwwroot is the root folder of your server). If you’re using Apache then you’ll want to publish it to the htdocs folder.

As we have specified that the files should be published to the root of the server, the output URL is simply the homepage of your server – for example, http://localhost:8500 (for ColdFusion). When you publish, Flex will automatically append the name of the html for your project on to the end – e.g. http://localhost:8500/GMAPS.html

The screen-shot below shows my project’s setup (click to enlarge).

If you’re having any problems you may also want to check the Debug Dialogue and/or Run Dialogue. To access these, click the little black arrow next to the Debug or Run buttons in FlexBuilder:

The dialogue box should display. You may need to override the defaults. The screen-shot below shows the correct launch paths (click to enlarge). In my case they were fine and didn’t need to be amended.

As long as your server is running correctly you should now be able to run your app and it should publish to localhost. You should see your map without the overlaid “Debug Mode” text, and you should be able to perform tasks such as geocoding without getting any errors.

* the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739)

** i.e. the URL which you specified when obtaining the key