For a while now i’ve been toying with the idea of creating an iPhone App. Due to my knowledge of web technologies such as XHTML and Javascript, I wanted to see how I could create an iPhone application using these techniques. With wanting to learn some of the new features HTML 5 would offer, I decided to create an app that tied into the GeoLocation API now available to the iPhone, via the 3.0 update.

Without planning anything out, I dived right into the HTML5 Geo Location spec and  successfully outputted the location as a Lat and Long value. This was pretty cool, but a lat and long on their own were pretty pointless (see what I did there).

I’d previously done some work using the Google Maps API and Flash (now no longer working due to an outdated version of the GMaps API), and thought i’d try my hand at plotting your current location on a Google Map.

This worked and I decided that rather than just showing your location, i’d tie this in with the Google Local Search API and allow you to search for things near your location.

Now before anyone starts moaning and saying that this functionality is already available, I wanted to create a Web App for a number of reasons:

• To see how close I could get to the look and feel of a native app.
• To learn some shiny new HTML5.
• I needed a little sideline project.
• It could become a base for some sort of snazzy location based events app.

So onto the actual app – I called it Showee and if you navigate to http://www.showee.me on your iPhone you’ll be able to see it in all it’s glory, (if you try it in a regular browser, you probably won’t see anything yet as I haven’t created a non iPhone version).

First thing to do is tap the (+) and choose ‘Add to home screen’, this way you’ll be able to appreciate how close this looks and feels like a native app (there is a status bar that gives you feedback about what the application is doing).

On load you will be asked to share you location. If you accept the application will determine your location and place a blue dot at your location. If the accuracy is greater than 20m it will keep checking your location for an improvement. Once your location has been determined to within 20m the app will stop searching.

At the moment that is pretty much it, but I plan to add more features in the future.

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.