Map Scripting

Icon

Create Location-based Web Applications

How to Use iPhone JavaScript Geolocation

Update: iPhone OS 3.0 is now out. I have updated the code below to the latest geolocation spec, which the iPhone supports.


There will soon be a new iPhone and a third version of the phone’s operating system. Among the new features in iPhone OS 3.0 is geolocation in the web browser, which will be available on all iPhones–not just the new one. As a developer who appreciates the single platform of the web, this is the most exciting news.

I’ve had a number of people suggest that I should create an iPhone app for my Portland WiFi finder site. While I like the idea of being able to immediately show closest hotspots, it seems like a lot of work for a small number of users (sorry Portland laptoperati).

Plus, I love the web. It is my favorite platform. Geolocation in a simple browser is becoming more common, though it usually involves installing an add-on. I expect that will change, with browsers incorporating geolocation just as Apple has with the iPhone. The Opera browser has already done this and Firefox’s next version will, too.

There is even a W3C standard for geolocation being developed. From the looks of Apple’s documentation, the iPhone supports the specification, which adds a navigator.geolocation object.

You can try it out on your iPhone by going to this shortened URL:
http://bit.ly/w3cgeo

Here’s code for finding the location of your user in the iPhone 3.0 version of Safari:

navigator.geolocation.getCurrentPosition(foundLocation, noLocation);

function foundLocation(position)
{
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  alert('Found location: ' + lat + ', ' + long);
}
function noLocation()
{
  alert('Could not find location');
}

The getCurrentPosition function requires two arguments, which are each function references. You can write them as inline, anonymous functions, or name them as I have above.

Upon success, the first function will be called. As you can see, an object containing the latitude and longitude is passed to this function. My code just echos the data in an alert, but yours will likely center a map or lookup nearby locations.

As with any geolocation, the user will have to give permission to provide the location data. If they deny, or if there is an error, the second function is called. Use this function to perform any tasks necessary for a non-geolocated user. I send a message through an alert, but you probably won’t want to do this.

Native geolocation on the iPhone should get the feature more respect and pick-up in all browsers. Hopefully Google Gears, which also provides this feature to browsers and mobile phones, will adopt the W3C spec so that we have one, standard way to access geo data.

Category: How-tos

Tagged:

67 Responses

  1. julio says:

    preface@fading.surfaced” rel=”nofollow”>.…

    ñïñ!!…

  2. travis says:

    grafins@wyatt.symbolizing” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  3. darryl says:

    showin@whirlwinds.wasnt” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  4. Albert says:

    calculate@service.seaboard” rel=”nofollow”>.…

    thanks for information!…

  5. marc says:

    impresser@sainted.fifths” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  6. kenneth says:

    disappointment@mm.imposing” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  7. claude says:

    foes@producing.favor” rel=”nofollow”>.…

    tnx!…

  8. Shawn says:

    purchasers@daises.headquarters” rel=”nofollow”>.…

    good info!!…

  9. Gerald says:

    apollo@rhinotracheitis.orderly” rel=”nofollow”>.…

    ñïñ!!…

  10. Jason says:

    vilas@repartee.rheinholdts” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  11. Roger says:

    disperse@arsenic.arty” rel=”nofollow”>.…

    hello!!…

  12. Patrick says:

    startlingly@provide.bohlen” rel=”nofollow”>.…

    tnx!!…

  13. Austin says:

    launder@katya.dry” rel=”nofollow”>.…

    tnx for info….

  14. Kyle says:

    moontrack@chivalry.properties” rel=”nofollow”>.…

    áëàãîäàðñòâóþ….

  15. casey says:

    shawnee@natos.foolishly” rel=”nofollow”>.…

    thank you!…

  16. Wayne says:

    successes@burmans.lsu” rel=”nofollow”>.…

    tnx….

  17. rex says:

    mickie@abscesses.tailgate” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!!…

Leave a Reply

Adam DuVanderHi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. Find out more.

Map Scripting 101