Hier je vous parlais de la géolocalisation avec le nouveau Firefox 3.5 . Mais je me demandais si on pouvais aussi utiliser cette localisation avec Internet Explorer, Safari ou même Chrome comme sur Flickr Mobile. Je suis donc tombé sur Google Gears qui est utilisé dans la version 3.5 de Firefox pour localiser les visiteurs. On va donc reprendre notre exemple de la dernière fois mais cette fois-ci nous allons utiliser Google Gears (qui à l’avantage d’être compatible avec les autres navigateurs). Le principe est le même sauf qu’au lieu de vous montrer une fenêtre de type Firefox, il vous affichera un message de Google Gears.
Utilisation
Comme la dernière fois, il nous faut un fichier HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Géolocalisation par Dator.fr <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=VOTRECLEAPI" type="text/javascript"></script> <script type="text/javascript" src="gears.js"></script> </head> <body> <h1>Géolocalisation depuis Google Gears par Dator</h1> <button class="locateMe">Localise moi !</button> <div id="map" style="width:500px; height:500px;"></div> </body> </html>
Comme vous pouvez le voir, nous avons inclut la base javascript de Google Gears que vous trouverez à cette adresse. Et pour finir il nous faut notre fichier locate.js :
var dator_gears = {
initialize: function() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.41, -122.08), 1);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
},
handleLocate: function(a) {
var zoomLevel = 14;
if (a.accuracy > 500)
zoomLevel = 10;
map.setCenter(new GLatLng(a.latitude, a.longitude), zoomLevel);
},
handleError: function(a) {
},
locateMeOnMap: function() {
var geo = google.gears.factory.create('beta.geolocation');
geo.getCurrentPosition(this.handleLocate, this.handleError);
}
}
$(function(){
dator_gears.initialize();
$('.locateMe').click(function(){
dator_gears.locateMeOnMap();
});
});
Conclusion
Vous pouvez tester le résultat ici(ne fonctionne pas avec Firefox 3.5) . Les résultats sont identiques si on compare la version uniquement pour Firefox 3.5 que pour celle-ci.
Jeu de briques
Snake
Pacman
Bubble