jeudi 2 juillet 2009
Géolocalisation via HTML5 ou Google Gears
Par Sylvek | 
jeudi 2 juillet 2009 à 10:50 | Mobile
Avec l'arrivé de l'iPhone 0S 3.0 et depuis hier de Firefox 3.5, la géolocalisation via HTML5 se répand de plus en plus. Il existe pour le reste des navigateurs la possibilité d'utiliser Google Gears afin de connaître la position de l'utilisateur. Ainsi, que ce soir sur Android, Windows Mobile, Opéra mobile et maintenant iPhone, il est possible d'offrir des services géolocaliser à moindre coût (cf. pas de développement natif).
Voici comment profiter au mieux des possibilités des navigateurs. Nous allons via cet exemple utiliser au mieux HTML5 sinon Google Gears si celui-ci est présent.
Comment détecter le HTML5 et Google Gears:
var geo = null;
var request = null;
var isGear = google != null && google.gears != null;
var isHtml5 = navigator != null && navigator.geolocation != null;
if(isGear) {
geo = google.gears.factory.create('beta.geolocation');
request = google.gears.factory.create('beta.httprequest');
}
if(isHtml5) {
geo = navigator.geolocation;
request = new XMLHttpRequest();
}
Demander la position de l'utilisateur :
var main = function() {
if(GBrowserIsCompatible()) {
initialize();
if(geo != null) {
geo.getCurrentPosition(updatePosition, handleError, {maximumAge:60000});
} else {
alert("Vous devez installer Google Gears pour que nous puissions vous localiser");
}
} else {
alert("Votre browser n'est pas compatible avec Google Maps");
}
};
var updatePosition = function(position) {
var coords = position.coords;
document.getElementById('position').innerHTML="Votre position : "+coords.latitude+","+coords.longitude;
var p = new GLatLng(coords.latitude, coords.longitude);
map.setCenter(p, 16);
addPoint(p, "Votre position actuelle", "red");
};
var handleError = function(positionError) {
alert('Attempt to get location failed: ' + positionError.message);
};
var initialize = function() {
map = new GMap2(document.getElementById("map_canvas"));
var c = new GLatLng(48.8567, 2.3510);
map.setCenter(c, 3);
map.disableDragging();
};
var addPoint = function(point, text, color) {
var i = new GIcon();
i.image = 'http://labs.google.com/ridefinder/images/mm_20_' + color + '.png';
i.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
i.iconSize = new GSize(12, 20);
i.shadowSize = new GSize(22, 20);
i.iconAnchor = new GPoint(6, 20);
i.infoWindowAnchor = new GPoint(5, 1);
var marker = new GMarker(point,{clickable: true, icon: i});
GEvent.addListener(marker, "click", function() {
var myHtml = text;
map.openInfoWindowHtml(point, myHtml);
});
map.addOverlay(marker);
};
Il suffit donc t'appeler main dans sa page web et le tour est joué. Noter le timeout sur le getCurrentPosition permettant de forcer la mise à jour de la position si celle-ci est plus vieille d'une minute.
.. c'est r.nabaztag.com/vl et pas r.natazbag.com/vl !
