skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mercredi 15 septembre 2010

Géolocalisation avec HTML 5

Publié par Infinite Loop, à 18 h 34 2 commentaires

Une autre nouvelle fonctionnalité qu'apporte le HTML 5, c'est le support pour la géolocalisation. Ce n'est pas aussi précis qu'un GPS, mais ça détecte généralement assez bien la ville où on se trouve.

Pour vérifier si le navigateur supporte la géolocalisation, on peut effectuer un test à l'aide du bout de code JavaScript ci-dessous :

if(navigator.geolocation){

alert('Activé');

navigator.geolocation.getCurrentPosition(
function(position){
alert(position.coords.latitude);
alert(position.coords.longitude);
}
);
}
Au moment d'appeler getCurrentPosition, le browser demandera une autorisation pour partager cette information (Firefox, Chrome et Opera).



Du côté de Safari pour Windows, il me demande bien l'autorisation mais n'a pas été en mesure de me retourner les coordonnées dans le popup.

Sinon, j'obtiens une latitude de 45.514516 et une longitude de -73.611056.

Saisies dans Google (45.514516, -73.611056), les coordonnées pointent à Outremont, ce qui n'est pas tout à fait exact. En fait, ça devrait possiblement correspondre à un endroit où mon fournisseur d'accès Internet possède des serveurs.



En obtenant les coordonnées aussi simplement, ça devient facile d'intégrer une carte Google Maps ou Bing Maps à l'emplacement approximatif où se trouve le visiteur.

Pour plus de détails : Geolocation API Specification sur W3C.


Tags: HTML, JavaScript

2 réponses à "Géolocalisation avec HTML 5"

  1. nico_nico a dit...
    16 septembre 2010 à 03 h 20

    C'est prometteur, comme technologie, et très simple à mettre en place. Par contre, la géolocalisation par IP laisse encore à désirer (au moins pour la France) : l'API me place à plus de 100km de chez moi.

    Infinite Loop a dit...
    16 septembre 2010 à 06 h 50

    Dans ton cas, c'est assez exceptionnel. Moi il me positionne à 7 km de chez moi.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ▼  septembre 2010 (34)
        • Goo.gl peut générer des codes QR
        • Nous sommes les débris de Dieu
        • Programmer en français ?
        • Profession : artiste Lego
        • La balise Meter en HTML 5
        • Citation no. 100 sur la langue
        • Top 4 des chansons pour envoyer promener quelqu'un
        • Pénurie de robots
        • Lieux de tournage de films et séries télé
        • Utiliser l'API de Bit.ly avec PHP
        • Suivre l'activité d'un serveur PostgreSQL
        • Impossible veut dire 25 heures
        • Première expérience en géocaching
        • Citation no. 99 sur les voitures
        • Attribut autofocus en HTML 5
        • Générer un PDF en PHP
        • Géolocalisation avec HTML 5
        • Une surprise se cache à l'intérieur !
        • Survol de l'audio en HTML 5
        • Attribut placeholder sur input HTML 5
        • Citation no. 98 sur le journal
        • Facture d'ordinateur acheté en 1996
        • Recette de Dr Pepper
        • Combien se vendait un PC en 1989 ?
        • Symphonie à 1 bit de Tristan Perich
        • Les Invincibles : les esprits parlent le latin
        • Allez-vous tirer l'ours ou pas ?
        • Énigme : obtenir la somme de 82
        • Attention à l'heure d'été en programmation
        • Citation no. 97 sur la prison
        • Totalement inutile
        • Nouveaux contrôles HTML 5
        • Hiérarchie dans une entreprise
        • Bière Melon Head de Picaroons
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft