LinkedIn Facebook Twitter bemoko blog bemoko technical pages
Tel: +44 1256 581028 Email: info@bemoko.com

Bemoko blog

17

Jun

iPhone 3.0 geolocation javascript API

Posted By Ian Walsh Wednesday, June 17, 2009. 30 Comments

With the iPhone 3.0 firmware released today, I thought I’d show you how to access one of the features I’ve been most looking forward to – support for the geolocation API in Safari means I can now create location aware websites.

This will be just a quick demo to retrieve and display the current longitue and latitude of your phone, along with a googlemap so we can see if the results are right.  The more interesting applications will come….

To do this we’ll use javascript and the newly added Navigator.Geolocation interface to call the getCurrentPosition() function to retrieve the current longitude and latitude of the phone, which we’ll display and pass to the googlemaps API.

The code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iPhone 3.0 geolocation demo</title>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
<script>
function handler(location) {
var message = document.getElementById("message");
message.innerHTML ="<img src='http://maps.google.com/staticmap?center=" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&zoom=16&key=YOURGOOGLEAPIKEY' />";
message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>";
message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>";
message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>";
}
navigator.geolocation.getCurrentPosition(handler);
</script>
</head>
<body>
<div id="message">Location unknown</div>
</body>
</html>

The results:

Try it for yourself by pointing your Safari browser at http://test.bemoko.com/test/iphonegeo.

Update 27/7/2009: I noticed the zoom level on the google static map API wasn’t being set so the map was zoomed all the way out. I’ve added a default zoom for the demo code above. Not sure if thats a new requirement from Google’s side?

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: mobile web

Comments

  • Greg

    Jun 19th, 2009

    Can you post the demo online so people can try it?

  • ian.walsh

    Jun 21st, 2009

    I’ve posted the demo online at http://bemoko.com/blog/iphonegeo

  • H@nnes

    Jun 25th, 2009

    Pretty cool, did not realize until now! Now what’s missing is a way to determine which SDK is installed. Any idea? Thanks!

  • Geolocation « Walking Through Time

    Jul 6th, 2009

    [...] http://blog.bemoko.com/2009/06/17/iphone-30-geolocation-javascript-api/ – nice Iphone demo [...]

  • Wait till I come! » Blog Archive » TTMMHTM: Meeting ticker, iPhone JavaScript Geo API, Geekspeakr, Flickr uploadr replacement and when to pee during movies

    Jul 19th, 2009

    [...] The iPhone 3.0 firmware release now allows us to access the JavaScript Geolocation API [...]

  • Stanislav

    Jul 20th, 2009

    @H@annes

    This looks like simple:
    if(typeof(navigator.geolocation) != “undefined” && typeof(navigator.geolocation.getCurrentPosition) != “undefined”) {
    /* iPhone OS3 */
    }

  • Justin

    Jul 20th, 2009

    @Stanislav
    All that tells you is that the current user agent supports the W3C’s geolocation API (http://dev.w3.org/geo/api/spec-source.html). It doesn’t tell you if the user agent is safari or iPhone 3.0. For instance, that test passes in Firefox 3.5.

  • The first of the (HTML5) mobile web app stores | bemoko's mobile web

    Jul 20th, 2009

    [...] We’re already seeing a taster of this HTML5 support, with the iPhone geolocation support in iPhone 3.0. Many apps currently in the app store realm lend themselves well to a personalised microsite with [...]

  • Nelson

    Jul 21st, 2009

    Thanks for the demo code! I cribbed off it to make a little webapp that shows nearby Wikipedia articles. More details on my blog at http://www.somebits.com/weblog/tech/wikihere.html

  • Mike

    Jul 23rd, 2009

    So with a xml document that only stores the names of cities eg: New York, Boston, London, Sydney etc. What would be the simplest way to interface the long and lat data with the city name strings.

    Does a database of city long and lats exist that i could reference with javascript?

  • Daniel

    Sep 20th, 2009

    Mike: try to use Googlemaps API -> Google knows what u want ;) they really do!

  • iPhone 3.0 Geolocation Javascript API - Affiliate Failure

    Oct 20th, 2009

    [...] View the code here: http://blog.bemoko.com/2009/06/17/iphone-30-geolocation-javascript-api/ [...]

  • Escaping the iPhone App Store « Ginormous Media

    Nov 24th, 2009

    [...] – Determine user location. On iPhone this means limited access to the GSP/Location API. This example demonstrates how easy it is to ask Safari for the user’s [...]

  • Dylan Phillips

    Jan 7th, 2010

    Just did a head to head with my iPhoneGS versus my Droid.

    Even with position options set to {enableHighAccuracy:true, maximumAge: 0}. The I phone just stunk.

    Looks like it was giving me the Address of the cell tower. If I left Safari, and did a GetLocation from Google Mapples.

    The next calls from within Safari got the correct location. This really needs to be fixed.

    Droid rocked it out. I was able to walk through the park, updating my GeoCode every 30, through JavaScript on the browser.

  • Dylan Phillips

    Feb 22nd, 2010

    Found this entry today, definitely some changes to the result set. The problem was that my iPhone took too long to get it’s location, after a few requests. It was able to ‘lock’ in on me. In fact, during intensive tests 3 weeks ago the iPhone outperformed Droid on the GPS.

    Very happy with both platforms and the possibilities.

  • Chi Patts

    Mar 5th, 2010

    Hello, I came across this article while searching for help with JavaScript. I have recently switched browsers from Google Chrome to Firefox 3.2. After the change I seem to have a problem with loading JavaScript. Every time I go on a website that needs Javascript, the site does not load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix the problem. Any help is very appreciated! Thanks

  • Asakura

    Mar 11th, 2010

    Found this entry today, definitely some changes to the result set. The problem was that my iPhone took too long to get it&#30;s location, after a few requests. It was able to 'lock' in on me. In fact, during intensive tests 3 weeks ago the iPhone outperformed Droid on the GPS.

    Very happy with both platforms and the possibilities.;

  • Craig

    Apr 21st, 2010

    Hopefully the writer is reading this comment. Any info on OS4 Beta? It seems this code does not work. I went to your test site and it returned ‘Location Unknown’

  • Ian Homer

    Apr 21st, 2010

    Thanks for the heads up. We’ll give it a go on OS4

  • Nic

    Apr 23rd, 2010

    That is beautiful.

    I have been looking for this functionality for many months now, and I have been told by a number of people (who should know better) that its not possible to get someones phone location from their browser.

    Great post

    Nic

  • Ivan

    Jul 9th, 2010

    @Craig: It seems that Apple has decided to modify their support. I’ve found that the GPS data provided using the Web-based API may correspond only to the AGPS (Assisted location) which lacks accuracy. Hopefully, they will release something soon to fix or inform about how to get more accurate data using the API.

  • Umut Aydin

    Aug 10th, 2010

    Hello,

    I couldn’t run it on iPhone 4 Simulator. I try to show an alert box with position data. There is no error but no result also.
    Any known problem like that?

  • krycek

    Nov 20th, 2010

    You don’t have to have the newest mobile phone to use GPS and Geolocation API. Almost every mobile browser (without proxy server) can be used to read position from buidin GPS. If You have Java and GPS in Your phone – You can use mobile-gps-web-gate – see at http://code.google.com/p/mobile-gps-web-gate/

  • ricky

    Mar 26th, 2011

    hi ive just tried this to test, im not getting a map, but a location,

    is this example no longer valid?

  • Ian Homer

    Mar 28th, 2011

    Ricky – it’s working OK for me (just tested in Firefox 4) – what browser are you coming in one?

  • ricky

    Mar 28th, 2011

    heya, yeah it was working now, sorry i had an error in my code.

    is there anyway to assign the long and lat to a variable in php, so when using the yelp api to search bars, a list of local ones would come up based on the long and lat?

  • Joris

    Jun 24th, 2011

    I just tested this on my Iphone 4 but it’s not working, still it is working in Safari, Chrome and Firefox 5…

    Do you know why it’s not working on the Iphone 4 and how I can get this to work?

    Thanks!

  • 306 – The Map: « Digital Art & Technology

    May 19th, 2012

    [...] site is BEMOKO and on the blog is a there is a post, ‘iPhone 3.0 geolocation javascript API‘, which shows exactly what I need to do in order to retrieve my current location and display [...]

  • Ben

    Dec 13th, 2012

    http://bemoko.com/blog/iphonegeo is no longer working. Can you please update/fix.

  • Ian Homer

    Dec 14th, 2012

    Hi Ben – thanks for raising that with us and sorry, but we had a little shuffle of site and this accidentally got squashed by our blog. I’ve moved the example to http://test.bemoko.com/test/iphonegeo so you can view it there now. Thanks – Ian

Leave a Comment

Name (required)

Email (will not be published) (required)

Comment