Create Location-based Web Applications for the iPhone
by W. Jason Gilmore
March 18, 2010
Learn how to provide your iPhone web application users with powerful location-specific features.
Location-based services such as Gowalla and Foursquare are experiencing dazzling growth, with users around the globe busily cataloging favorite coffee shops, learning more about restaurants in their areas, and chronicling vacation itineraries. In fact, location-based applications are one of today's hottest trends in mobile development.
The success of any such application begins with the ability to determine the
user's current location. This can be accomplished in several ways and to
varying degrees of accuracy. One of the oldest ways is via IP geolocation, done
by comparing the user's IP address against a database such as that compiled by
MaxMind. If the mobile device is connected
to a cellphone network, then you can use triangulation to determine the user's location as compared to nearby cell towers. Finally, if
the mobile device includes a built-in GPS unit, then it might be possible to
identify the user's location to an accuracy of just a few feet!
With the June 2009 iPhone 3.0 firmware update, Apple made it trivial to
retrieve a user's current location using just a JavaScript snippet. This means
you can create web-based location applications for the iPhone and iPod without
having to invest the time and money to create and maintain more traditional iPhone
applications. Read on to learn how.
Introducing the Geolocation API
Recognizing the growing importance of location-based applications, in 2008
the W3C set out to establish a standard for accessing location-specific information by way of a device such as a laptop,
Blackberry or iPhone. Known as the Geolocation API Specification, this document defines a technology-agnostic approach to
identifying and updating the user's location as specified by latitude and
longitude coordinates. Although this standard has not been finalized, it has
already been embraced by numerous industry heavyweights, including Firefox,
Google, and Apple.
The specification defines several key requirements, including not only the
ability to retrieve the aforementioned coordinates, but also to retrieve
information about the location accuracy, and even receive updates when the
location changes. These features are made available through a set of JavaScript
classes added to the Safari browser with the iPhone OS 3.0 release.
Retrieving the Current Position
To retrieve the current location, you can call the
navigator.geolocation class's getCurrentPosition()
method, passing the name of a callback function along as the lone parameter:
You'll pass a position object to the callback function, and subsequently you can
access the coords attribute to retrieve the user's
current latitude and longitude, in addition to the estimated accuracy of the
position:
Because of the privacy implications that could arise from identifying a
user's location, Safari will ask the user to confirm whether the user would like to
share his or her location, as shown in Figure 1. The user will have to do this only
once; Safari will remember the user's choice.
This is the complete code listing for displaying the location:
<html>
<head>
<title>Retrieving location on the iPhone</title>
<script type="text/javascript">
function displayCoordinates(location) {
var location = document.getElementById("location");
location.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
location.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>";
location.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}
navigator.geolocation.getCurrentPosition(displayCoordinates);
</script>
</head>
<body>
<div id="location">Could not determine location</div>
</body>
</html>
Incidentally, Safari isn't the only browser that supports the
Geolocation API. Running the same code within Firefox produces identical results
to those shown in Figure 2. Additionally, Firefox like Safari will also prompt the user to confirm that he or she would like to share coordinates using the prompt displayed in Figure 3.
With the coordinates in hand, it's trivial to plot the user's location on a
Google Map. All you need to do is pass the coordinates to the Google Maps API,
create a new GMarker() object, and add the marker to the map:
<html>
<head>
<title>Retrieving location on the iPhone</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=API_KEY_GOES_HERE"
type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
google.setOnLoadCallback(function() {
$(function() {
navigator.geolocation.getCurrentPosition(displayCoordinates);
function displayCoordinates(location) {
var map = new GMap2(document.getElementById("location"));
map.setCenter(new GLatLng(location.coords.latitude, location.coords.longitude), 12);
map.setUIToDefault();
var point = new GLatLng(location.coords.latitude, location.coords.longitude);
var marker = new GMarker(point);
map.addOverlay(marker);
}
})
});
</script>
</head>
<body>
<div id="location" style="width: 300px; height: 300px; border: 1px solid black;"></div>
</body>
</html>
Executing this script from my iPhone produces the output shown in Figure 4.
In the coming years, location-based features undoubtedly will become
a standard part of all applications, web-based or otherwise. Thanks to features
such as the iPhone's integration of the Geolocation API specification, it's
already trivial to add these features to your own applications! As always, if
you've integrated location-based features into your application, please tell us
about it in the comments!
