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