HTML 5 et geolocalisation
Bonjour à tous,
je me lance dans HTML 5 et Javascript forcément... :cry:
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:
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 :)
