iPhone 3.0 geolocation with Javascript
I was watching one of the video tutorials from Apple last night about some custom JS available on Safari, only on the iPhone 3.0, that let’s you interact with the phone and obtain data like the current location, etc.
So I built a little page to see how it works. I included Mootools 1.2.3 from Google servers and the Google Maps API. And voilá, with a few lines of code we have a totally functional web based GSP navigation system. A little bit ugly, but functional. Currenlty it only centers the map on the coordinates given by the phone, and also does a reverse geolocation to obtain the address (actually city, state and country). But it could be easily extended to add markers to the map, or even paths to track the movement.
If you have an iPhone (or an iPhone simulator) go to:
http://enekoalonso.com/research/iphone/geolocation.html
The source code:
-
var Navigator = new Class({
-
initialize: function() {
-
-
// Listen for position changes
-
this.watchId = navigator.geolocation.watchPosition(
-
function(position){ this.position(position) }.bind(this),
-
function() {},
-
{ enableHighAccuracy: true, timeout: 1000, maximumAge: 10000 }
-
);
-
this.infoPanel = $('info');
-
-
// Create the Geocoder and the Map
-
this.geocoder = new google.maps.Geocoder();
-
this.map = new google.maps.Map($('map'), {
-
zoom: 12,
-
mapTypeId: google.maps.MapTypeId.ROADMAP
-
});
-
},
-
-
position: function(position) {
-
// Update labels
-
this.infoPanel.getElement('p.date').set('text', position.timestamp);
-
this.infoPanel.getElement('p.coords').set('text', position.coords.latitude + ', ' + position.coords.longitude);
-
this.infoPanel.getElement('p.altitude').set('text', position.coords.altitude);
-
this.infoPanel.getElement('p.heading').set('text', position.coords.heading);
-
this.infoPanel.getElement('p.speed').set('text', position.coords.speed);
-
-
// Center map
-
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
-
this.map.set_center(latLng);
-
-
// Reverse geolocation (get current address)
-
this.geocoder.geocode({'latLng': latLng},
-
function(results, status) {
-
if (google.maps.GeocoderStatus.OK) this.showAddress(results)
-
}.bind(this)
-
);
-
},
-
-
showAddress: function(results) {
-
// console.dir(response);
-
if (results[1]) {
-
this.infoPanel.getElement('p.location').set('text', results[1].formatted_address);
-
}
-
}
-
});
-
-
window.addEvent('load', function() {
-
new Navigator();
-
});
Enjoy.