Location in iPhone Web Apps

One of the key limitations of developing Web applications for iPhone is that you are not allowed to access the hardware on the device via the Web browser. For example, you cannot access the camera on the iPhone; neither can you access the accelerometer. This seriously limits the kinds of applications you can develop on the iPhone. One notable exception, however, is the support for tracking the location of devices, through a combination of GPS, Wi-Fi, and cellular triangulation.

In this article, I will take you through the geo-location classes available on the iPhone OS 3.0, and explore them to show you some of the interesting applications you can build.

Creating the Project

Using Dashcode, create a new Custom project and name it as LBS. For this project, you will create a web application for the iPhone and use it to display the current location using Google Maps. You will embed the Google Maps in your web application using the Google Maps API, which provides programmatic access to Google Maps using the various Javascript functions.

To use the Google Maps in your application, you need to apply for a free Google Maps API key (read the licensing page for more detailed information on the terms and conditions). You can sign up for a free Google Maps API key at: http://code.google.com/apis/maps/signup.html.

As the Google Maps API key is tied to the domain in which you are hosting your application, you need to ascertain the exact URL that you need to use for applying for the key. For testing in the iPhone Simulator, you can go to your project in Dashcode and press Command-R to test the application. The URL in the iPhone Simulator should look something like this:http://localhost:12345/LBS/index.html. In this case, you should use http://localhost:12345 when applying for the key.

You can also deploy the Dashcode project into your local Mac OS X web server (enabled through the Web Sharing feature in System Preferences). In this case, take note of the URL as shown in the Run & Share tab of Dashcode and use it when applying for the key. Finally, if you want to deploy it to a live web server, use the domain name of the web server. For example, if your web server domain is http://www.yourcompany.com, then use “http://www.yourcompany.com” when applying for the key.

Once you have obtained the Google Maps API key, you will be ready to start embedding Google Maps in your application.

In Dashcode, edit the index.html file of your project by adding the following