The Locator Panel has now been updated to v1.2. The update improves the functionality of the Map, in terms of being controlled by the keyboard and mouse. It also improves feedback when a connection is lost or cannot be found.

You can download the panel from here.

I’ve have created my first true web mash-up using Flash and the Google Maps API. Firstly check it out here, and then head back to read the steps involved.

Note! At the moment I have manually limited the search to UK and there is no option to remove a marker/pin.

I was first inspired to create this after stumbling across the GMap Flash component from AFC. I liked the idea of having the Google Maps experience within Flash. As a Flash developer I have more control and flexibility over how the application would work. I could also add my own interface around the component and integrate it into any projects, plus if I needed to hook up to  a mySQL database.

While the GMap component is brilliant there wasn’t a search function built in. This meant that locations were hard coded into the ActionScript. My plan was to create an application where the user could search for a location and have it displayed within Flash.

Note! In order to create this for yourself you need a Google Maps API Key

There are three main components that work together to create the search function:

Flash > PHP > Google Maps API > PHP > Flash (GMap component)

I’ll break each stage down into its core functionality. I’ll assume that you know ActionScript 2.0 and PHP.

You will also need the CURL extension installed on your sever.

Flash to PHP

The first step was to capture some data from Flash and send that to a PHP page. Inside Flash I created a function that took the input from a text box and sent this to a server side script (my PHP page). This was achieved using the LoadVars function of Flash:

var dataURL:String = PHP script on my server

var getLoc:LoadVars = new LoadVars();

function sendData(){
    var loc:String = searchLoc.text;
    getLoc.load(dataURL + "?searchLoc=" + loc);
}

searchBtn.onPress = function(){
sendData();
}

This assumes that you have a textbox and button object on the stage.

PHP to GoogleMaps API

We have now sent the data to a PHP page called that is sitting on my server. The page was modified from a script from here. The GoogleMaps API takes a location in the form of a querystring and returns back either a set of Comma Seperated Values or XML data. In this case I am interested in the CSV. The CSV contained Longitude and Latitude co-ordinates which the GoogleMaps API needs to determine a position.

<?php

//Set up our variables

$longitude = "";

$latitude = "";

//Three parts to the querystring: q is address, output is the format (

$key = "get your own API!";

$address = urlencode($_GET["searchLoc"]);

$url = "http://maps.google.com/maps/geo?q=".$address."&output=csv&key=".$key;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_HEADER,0);

curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);

curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

$data = curl_exec($ch);

curl_close($ch);

if (strstr($data,'200'))

{

$data = explode(",",$data);

$longitude = $data[3];

$latitude = $data[2];

echo "&myLong=".$longitude."&myLat=".$latitude."&";

} else {

echo "&error=Error in getting location";

}

?>

The above code has just taken the Lat and Long from the Data array (created from the CSV values) and echoed these out. You will notice that I have assigned the values to two variables. I will use these within Flash to give the GMap component its required data.

We have now sucessfully sent our search term to the PHP script, sent the required querystring to the GoogleMaps API and returned the data we need back to the PHP script. We have then used the echo function of PHP to print the Latitude and Longitude to two variables.

PHP to Flash

Once back inside the Flash a function is called when Flash receives the data from the PHP page:

getLoc.onLoad = dataLoaded;

function dataLoaded(){

_global.myLat = getLoc.myLat

_global.myLong = getLoc.myLong

}

This script assigns two variables in Flash to the variables of Lat and Long sent from the PHP and constructs the map. See the GMap documentation to see how this is done.

The GMap component then queries the GoogleMaps API to get the location back. Thats it!! Simple wasn’t it.

I’ve added a few more features using the Flash API such as a data grid to display the search results. By clicking on a result the user will be taken to the location of that search. Try entering in a few random towns around the UK to see this work.

I’ve also added the ability to drop markers on a location and saves its position. I have created this using the arrays and a counter (to increment the number for the marker). The arrays store the location name, lat and long values.

I next plan to link this with a MySQL database so that a user could log in and save their positions. This would be fairly simple as I already have an array with all of the search data. I could simply save the array and then load it back into Flash the next time the user logged in.

I plan to make the code available once it has been tidied up.

Update!! I have updated the mashup so that it now includes the following:

• Search history of locations
• Pop up descriptions for each location marker
• Different colours for markers (to distinguish between, search, custom and history)
• Auto complete function on text entry
• The help button DOES NOT work at present. I will create this once the interface is complete.