iPhone 3.0 geolocation javascript API

Ian Walsh — Wed, 17 Jun 2009 21:04:42 +0000

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:

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 demotitle>
<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 =" + location.coords.latitude + "," + location.coords.longitude + "&size=300x200&maptype=hybrid&zoom=16&key=YOURGOOGLEAPIKEY' />";
message.innerHTML+="Longitude: " + location.coords.longitude + "
";
message.innerHTML+="Latitude: " + location.coords.latitude + "
";
message.innerHTML+="Accuracy: " + location.coords.accuracy + "
";
}
navigator.geolocation.getCurrentPosition(handler);
script>
head>
<body>
<div id="message">Location unknowndiv>
body>
html>

The results:

Try it for yourself by pointing your Safari browser at http://bemoko.com/blog/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:

bemoko's blog on mobile » safari

iPhone 3.0 geolocation javascript API