Pezholio

Getting Location in Safari on iPhone OS 3.0

| Comments

Well, the Apple Worldwide Developer’s Conference is over, the announcements have been made, and version 3.0 of the iPhone software is coming out next week.

If (like me) you’re a developer, or you’ve managed to :ahem: ‘acquire’ a copy of the version 3.0, you’ll notice that there’s a lot of cool new things, like search, voice notes, picture messaging (at last!) and copy and paste. One thing that wasn’t really trumpeted was the inclusion of a Javascript Geolocation API.

This API now means if (like me) you’ve not yet got your hands dirty with Objective C, and are quite comfortable with using Javascript and HTML thank you very much, you will now be able to get a user’s location using only those two methods in your web apps. Let’s take a peek:

Taking a peek

The Geolocation API is a W3C specification, which means that (in theory) it will be adopted by other browsers eventually (even desktop browsers!), so even if you’re not developing for iPhone, you’ll be able to use it!

The main crux of this is the Geolocaton object, which accepts a function to return if the call has been sucessful, a function to return if there’s been an error, and a few options. If we call the success function ‘showMap’ and the error function ‘error’ and ask the browser to try and get the best accuacy, the code will look something like this:

navigator.geolocation.getCurrentPosition(showMap, error, {enableHighAccuracy: true});

We then need to build our success function, which gets the position and then shows the user’s current location using the Google static maps API (using jQuery, ‘cos that’s how I roll)

`function showMap(position) {

latitude = position.coords.latitude;

longitude = position.coords.longitude;

$(“#map”).html(””)

}`

(Obviously you’ll need to generate a new API key for your own site, I’ve included mine here)

The error function is simply a function that shows an error pop up:

`function error() {

alert(“Couldn’t get location!”);

}`

You can do other stuff, such as showing exactly what went wrong, but I’ll leave that up to you. It’s all in the API anyway.

That’s literally it! All you need to do then is wrap the whole lot in a function and then call it onload. You can see an example here (obviously it won’t work if you’re not using the new iPhone software)

Hope this has been useful, any questions, check out the documentation, or ask in the comments!

A bit more…

Since writing this post I’ve noticed that the accuracy wasn’t great, I’ve now updated the demo to use watchPosition to try and get the most accurate position. It tries 7 times to get a location accuracy of below 100, if not, an error message shows and the best possible location is shown. The script now looks like this:

`

var count = 0

function getCoords() {

var watch = navigator.geolocation.watchPosition(showMap, error)

function showMap(position) {

count ++;  

latitude = position.coords.latitude;  

longitude = position.coords.longitude;  

accuracy = position.coords.accuracy;  

if (accuracy  100) {  

$("#map").html("img src='http://maps.google.com/staticmap?center="+ latitude +","+ longitude +"zoom=14size=320x356maptype=mobilemarkers="+ latitude +","+ longitude +"key=ABQIAAAAyUvSDBrAO4ePxVHcqp-K5hQ5esWtNpQWehF-Z9NQeJEFHAWuORRop2dJC86rRc7w8ebZJ0ODn4_-bQsensor=false' /")  

navigator.geolocation.clearWatch(watch);  

}   

if (count  7) {  

alert("Couldn't get your exact location, this is the best we could do. Sorry!");  

$("#map").html("img src='http://maps.google.com/staticmap?center="+ latitude +","+ longitude +"zoom=14size=320x356maptype=mobilemarkers="+ latitude +","+ longitude +"key=ABQIAAAAyUvSDBrAO4ePxVHcqp-K5hQ5esWtNpQWehF-Z9NQeJEFHAWuORRop2dJC86rRc7w8ebZJ0ODn4_-bQsensor=false' /")  

navigator.geolocation.clearWatch(watch);  

}  

}

function error(error) {

alert("Couldn't get location!");  

}  

}

`

Comments