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 element to the element:

Let's now see how you can access these location data via your Dashcode project. In main.js, add in the following statements:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

varmap;

varinfo;

functionload()

{

dashcode.setupParts();

//---displays the map in the DIV element---

initializeMap();

//---get the DIV element---

info=document.getElementById("text");

//---show the current position---

navigator.geolocation.getCurrentPosition(showMap);

}

functionshowMap(position)

{

//---display the current location---

info.innerText="Lat: "+position.coords.latitude+

" Lng: "+position.coords.longitude;

//---set the map to the current location---

map.setCenter(

newGLatLng(position.coords.latitude,position.coords.longitude),18);

}

Essentially, the getCurrentPosition() function retrieves the current position of the device. It takes in a callback function (named showMap() in this example), which you will use to display the location on the Google Maps. You will also display the latitude and longitude of the current location in the div element.

To test the application, press Command-R in Dashcode. Notice that when the application starts up, you will be asked to grant permission to it to obtain your current location. Once permission is obtained, observe that the Google Maps will display a new location (see Figure 2). For the iPhone Simulator, it always displays "1 Infinite Loop, Cupertino, USA".

Figure 2.Testing the application on the iPhone Simulator

Monitoring Location Changes

Besides the ability to obtain the current location information, a more interesting capability is monitoring changes in location. This is useful if your user wants to view the map when he is on the move, such as when he is driving. To monitor for changes in location, you use the watchPosition() function of the Geolocation variable.

Add the following statements to the main.js file. The following code adds a marker to the current location as well as displays the address of the current location (through reverse geo-coding - part of the functionalities provided by Google Maps).

Press Command-R to test the application. To really test the application, you should use a real device (preferably an iPhone 3GS). As you move around, you will see the marker change its position. You will also see the address of the current location. For best effect, add the application to the Home Screen (see Figure 3). You can now view the map and the location in its entirety.

Figure 3.Adding to Home Screen so that you can run the application full screen

Summary

In this article, you have seen how to implement location-based services in your iPhone web applications. If you have implemented something similar, let us know! As usual, if you have new ideas for implementing location-based services, I would like to hear them.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland