Map Scripting

spacer

Create Location-based Web Applications

Jun 11, 2009

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:
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:

21 Responses

  1. Geolocating Your iPhone Users via the Browser | Tech-monkey.info Blogs says:
    June 18, 2009 at 6:30 am

    [...] Adam DuVander (the fellow behind the Portland Wifi Finder among other things) has written up an excellent post on how to access their location. The iPhone is using the W3C Geo-Location spec. If you are running [...]

  2. ≈ Relations › links for 2009-06-18 says:
    June 18, 2009 at 4:45 pm

    [...] How to Use Geolocation in Mobile Safari – Map Scripting iPhone OS 3.0 is now out. I have updated the code below to the latest geolocation spec, which the iPhone supports. (tags: content tutorial geolocation iphone) [...]

  3. Geolocating Your iPhone Users via the Browser | Design Website says:
    June 19, 2009 at 12:55 am

    [...] Adam DuVander (the fellow behind the Portland Wifi Finder among other things) has written up an excellent post on how to access their location. The iPhone is using the W3C Geo-Location spec. If you are running [...]

  4. Daily Links for Friday, June 19th, 2009 says:
    June 19, 2009 at 3:48 am

    [...] How to Use Geolocation in Mobile Safari – Map Scripting [...]

  5. WifiPDX Goes Geo | Simplicity Rules says:
    June 20, 2009 at 4:37 pm

    [...] explained iPhone geolocation in a post on my book [...]

  6. spacer Jay Crossler says:
    June 21, 2009 at 7:36 pm

    I love this stuff! I just posted a post with more details and a bunch of code examples on how to do GeoLocation and Offline Web Databases at: wecreategames.com/blog/?p=210

    I think this is really a game-changer and will evolve how applications are developed — much more HTML-based, and less native apps.

  7. Old Media, Short Post, Small Prototype | Ben Hammersley's Dangerous Precedent says:
    June 22, 2009 at 12:54 pm

    [...] itself simple JavaScript Google Maps API, that uses two cunning tricks: this Clustering code, and this code that uses the new nascent W3C geolocation standard that the iPhone3 supports, like [...]

  8. Old Media, Short Post, Small Prototype | dv8-designs says:
    June 22, 2009 at 1:46 pm

    [...] itself simple JavaScript Google Maps API, that uses two cunning tricks: this Clustering code, and this code that uses the new nascent W3C geolocation standard that the iPhone3 supports, like [...]

  9. links for 2009-06-23 - paulcarvill.com says:
    June 23, 2009 at 3:04 pm

    [...] How to Use Geolocation in Mobile Safari – Map Scripting (tags: safari mobile geo location javascript geocoding) [...]

  10. spacer Steve Stedman says:
    June 30, 2009 at 1:46 pm

    With geolocation tools like this now baked into the browser, replicating the native iPhone Maps app is child’s play: plebeosaur.us/you-are-here-with-safari-on-iphone/

    Expect a flood of location-aware web innovation in the next year.

  11. Trying out geolocation in Mobile Safari | making things work says:
    July 6, 2009 at 3:02 pm

    [...] mapscripting.com/how-to-use-geolocation-in-mobile-safari  Try it out on your iPhone [...]

  12. spacer Mike P. says:
    August 19, 2009 at 7:57 am

    Thanks Adam – this is just what I needed!

  13. spacer omarius says:
    September 15, 2009 at 11:26 pm

    Realy Nice !

    Is there a painless method to get a Countryname or countrycode from the gps data?

  14. spacer AdamD says:
    September 16, 2009 at 9:15 am

    Omarius,

    There are several JavaScript-based IP geolocators. That’s the route I’d take, because it will work for almost all of your visitors. The easiest comes in Google’s Ajax Loader, which would be convenient because you can use it to load Google Maps, too (assuming you use it).

    More about it here:
    code.google.com/apis/ajax/documentation/#ClientLocation

  15. spacer Pasha says:
    September 29, 2009 at 7:35 pm

    Thats great, but…as we all know from using an iPhone experience, the user’s location accuracy is not great from the initial request to get a location. When using google maps it takes about 30 seconds to turn on GPS and find a location with hight level of accuracy.

    Thats why I think it would be much more useful to use navigator.geolocation.watchPosition.

    What would be great to see is some code example where it tries to find a best possible accuracy within say 30 seconds.

  16. spacer russell says:
    December 18, 2009 at 12:02 am

    excellent! i’ve been looking for something like this. thanks for the info.

  17. MapQuest Mobile Implements Browser Geolocation - Map Scripting says:
    January 2, 2010 at 12:03 am

    [...] should make you feel good about mobile web standards. Mapping pioneer MapQuest is now using the geolocation standard to provide directions from your current location in MapQuest Mobile — m.mapquest.com, which [...]

  18. Tutorial for a IP to geolocation aggregator script | united-coders.com says:
    April 23, 2010 at 11:46 am

    [...] some googling I found a hint from Adam to get the geo position directly via javascript if the browser is running on a mobile device. The [...]

  19. Location APIs: FourSquare, Latitude, etc - Map Scripting says:
    July 26, 2010 at 12:59 am

    [...] addition to the W3C geolocation standard (I covered iPhone geolocation previously) and finding your user’s location based on IP, there are a number of services that [...]

  20. Where Are All the Location Web Apps? says:
    August 28, 2010 at 2:37 pm

    [...] been a year since iPhone added geolocation to its browser. It’s also now available in Android and in many desktop browsers. The standard [...]

  21. iPhone “watchposition,” But Only If The Location Has Changed - Map Scripting says:
    December 12, 2010 at 9:54 pm

    [...] I’ve written previously iPhone geolocation using JavaScript is quite easy. In addition to grabbing the location once, you can use the W3C geolocation standard [...]

Leave a Reply × Cancel reply

spacer Hi, 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 Essentials

  • Example Map Mashups
  • Map Scripting 101: The Book
  • Map Scripting Start Here Guide

Recent Posts

  • iPhone “watchposition,” But Only If The Location Has Changed
  • Wishful Mapping: Can I Give You a Book?
  • Useful Web Map Resources for Cartographers
  • Chapter 6: Explore Proximity
  • Chapter 5: Handle Map Events

Map Scripting 101

spacer
Now Available
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.