HTML 5 et geolocalisation

**jojodu31** · 05/02/2013, 12h55

Bonjour à tous,

je me lance dans HTML 5 et Javascript forcément...

J'ai le bouquin "HTML5 Une référence pour le développeur web" - qui en passant est vraiment excellent - et au chapitre geoloc il y a un exemple pour utiliser la nouvelle API navigator.geolocation.

Mon problème : impossible de le tester sous chrome même avec le paramètre "Autoriser la geoloc", sous IE ça ne fonctionne pas non plus.

Du coup j'ai testé avec la lib geo-location-javascript qui "unifie" les appels pour tous les navigateurs. Mais rien ne se passe non plus.

Voici le code (fichier HTML complet) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test geolocalisation</title>
</head>
 
<body>
<h1 id="titleh1">Mon titre !!!</h1>
<div id="maposition"></div>
 
<div id="map" stlye="width:640px;height:480px"></div>
 
 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script scr="geo-location-javascript/js/geo.js"></script>
 
<!-- Javascript code -->
 
<script>
 
	function succesGeo(position){
    	var infopos = "Position determinée : <br>";
        infopos +="Latitude : " + position.coords.latitude +"<br>";
        infopos +="Longitude : " + position.coords.longitude +"<br>";
        document.getElementById("maposition").innerHTML = infopos;
 
		var latlng = new google.maps.LatLng(position.coord.latitude, position.coords.longitude);
 
		var optionGmaps = {
			mapTypeControl: false,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			zoom:15
		};
 
		var map = new google.maps.Map(document.getElementById("map"),optionGmaps);
 
		var marker = new google.maps.Marker({
			position:latlng,
			map:map,
			title:"Vous etes ici"
		});
	}
 
	function errorCallback(error){
		var info = "Erreur lors de la location : ";
		info += error.message;
		document.getElementById("maposition").innerHTML = info;
	}
 
	//determine if the handset has client side geo location capabilities
	if(geo_position_js.init()){
	   geo_position_js.getCurrentPosition(succesGeo,errorCallback);
	}
	else{
	   document.getElementById("maposition").innerHTML="Erreur de chargement";
	}
 
</script>
 
</body>
</html>

Merci de votre aide par avance

**SpaceFrog** · 05/02/2013, 13h04

Ce code focntionne pour moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(function(position){ 
var liste="" 
for (elt in position.coords){liste+=elt+" => "+position.coords[elt]+"\n";}
alert(liste)
})
</script>

**jojodu31** · 05/02/2013, 14h38

Merci beaucoup pour ta réponse, mais au delà de ça ce qui m'intéresse c'est de comprendre pourquoi ma solution ne fonctionne pas

Si quelqu'un a des pistes je suis preneur

**NoSmoking** · 05/02/2013, 19h09

Bonjour,

Du coup j'ai testé avec la lib geo-location-javascript qui "unifie" les appels pour tous les navigateurs. Mais rien ne se passe non plus.

il y a donc une erreur, soit dans le script, soit il ne trouve pas le script.
Est tu sûr du chemin d’accès au fichier js?

**jojodu31** · 06/02/2013, 13h49

bien vu, j'avais vu l'erreur dans la console de chome qui ne connaissait pas l'objet geo_location_js.
Mais j'ai mis 10 ans pour voir qu'en fait j'avais écrit scr au lieu de src dans l'élément script.....

Les débuts dans le web sont laborieux... ça change du Java où Eclipse nous dit dès qu'il y a une erreur de syntaxe quelle perte de temps là

Merci en tous cas

**SylvainPV** · 06/02/2013, 13h54

Tu peux éviter ce genre d'erreurs en utilisant un bon IDE qui valide ton HTML/CSS/Javascript. Il existe quelques plug-ins Eclipse pour ça, mais je te conseille d'opter pour un autre IDE pour tout ce qui est front-end : WebStorm ou Aptana en gratuit sont de bons choix.

**MaitreKaio** · 06/02/2013, 14h13

Je dirais aussi qu'il faut prendre l'habitude de regarder la console quand ça ne va pas comme on l'espère

**jojodu31** · 06/02/2013, 14h32

@MaitreKaio
en effet j'ai déjà cette habitude ^^ Mais là je vérifiais l'url du script qui étais correcte...

Sinon merci pour les IDE, pour l'instant je testais Dreamweaver mais c'est pas terrible. Je voulais revenir sous eclipse, mais je vais tester ceux dont tu parles merci

**Aurelien Plazzotta** · 12/02/2013, 20h07

A noter qu'Aptana est disponible en deux versions :
- plugin d'Eclipse;
- standalone.

Il est très pratique pour développer front-end et PHP

HTML 5 et geolocalisation [API HTML5]

JavaScript

Discussions similaires

Partager

Partager