GéoLocalisation HTML 5 [Débutant(e)]

**Defqon** · 19/02/2013, 17h00

Bonjour tout le monde !

Je débute dans le HTML, et j'ai un projet en cours ça serait de créer une page avec un plan de google maps.
Alors oui j'ai déjà regardé le net, vu qu'il y avait une api maps, seulement j'ai du mal à comprendre comment m'en servir..

Les questions :
1) Vous utilisez quel logiciel pour coder ?
2) J'ai trouvé du code sur le net mais il marche pas chez moi.. Surement une erreur de ma part..

et enfin 3) j'aimerais pouvoir afficher la carte correspondant à la position de l'ordinateur ou du mobile.

Merci à ceux qui prendront le temps de me répondre

**Defqon** · 20/02/2013, 18h24

J'ai trouvé ce tuto plutôt bien fait mais j'arrive pas du tout à m'en sortir..

http://paulund.developpez.com/tutori...cartes-gmapjs/

En fait je sais pas ou mettre le code que nous fournit l'auteur, si quelqu'un peut m'éclairer..

**NoSmoking** · 20/02/2013, 22h37

Bonjour,
il existe bien évidement la

pour une première prise en main.

Concernant plus précisément ton besoin il y a cette discussion http://www.developpez.net/forums/d13...olocalisation/.

Je te mets le code fonctionnel repris rapidement, comme base de travail.

Code html :

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
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[display:table]</title>
<style>
#map{
  width:500px;
  height:500px;
  margin:auto;
}
</style>
</head>
<body>
<div id="position"></div>
<div id="map"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function callbackSuccess(position) {
  var posInfo = "Votre position a été déterminée avec succès ! <br />";
  posInfo += "Latitude : " + position.coords.latitude + "<br />";
  posInfo += "Longitude : " + position.coords.longitude + "<br />";
  posInfo += "Altitude : " + position.coords.altitude + "<br />";
  document.getElementById('position').innerHTML = posInfo;
 
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
  var gmapsOptions = {
    mapTypeControl: false,
    center: latlng,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 10
  };
 
  var map = new google.maps.Map(document.getElementById('map'), gmapsOptions);
 
  var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title: "Vous êtes ici"
  });
}
 
function callbackError(error) {
  var info = "Erreur lors de la géolocalisation : ";
  switch (error.code) {
    case error.TIMEOUT:
        info += "La durée de traitement est trop importante !";
      break;
    case error.PERMISSION_DENIED:
        info += "Vous n'avez pas donné la permission !";
      break;
    case error.POSITION_UNAVAILABLE:
        info += "La position n'a pu être déterminée !";
      break;
    case error.UNKNOWN_ERROR:
        info += "Une erreur inconnue a eu lieu !";
      break;
  }
  document.getElementById('position').innerHTML = info;
}
 
if (navigator.geolocation) {
 
  navigator.geolocation.getCurrentPosition(callbackSuccess, callbackError, {enableHighAccuracy: true, timeout: 960000, maximumAge: 120000});
 
} else {
  alert("L'API de géolocalisation n'est pas disponible, il faudrait proposer une alternative !");
}
</script>
</body>
</html>

**Defqon** · 23/02/2013, 14h25

Bonjour,

Merci de m'aider, alors je suis aller voir la FAQ et ai trouvé une partie de mes réponses.
Donc j'arrive à centrer ma carte sur des coordonnées qui sont mis en paramètres, seulement maintenant j'aimerais que la carte s'affiche à l'endroit où se trouve l'ordinateur (il me semble avoir lu que c'est possible avec l'adresse IP) ou bien l'endroit ou se trouve le mobile.
Car j'aimerais en but final pouvoir utiliser cette page avec un téléphone mobile.

Voilà le code actuelle avec votre aide :

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
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>[GoogleMaps API V3] Insertion d'une Carte</title>
    <style type="text/css">
      #div_carte {
        height : 600px; /* IMPERATIF */
        width : 600px;
        margin : auto;
        border : 1px solid #888;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initCarte(){
        // création de la carte
        var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
          'center' : new google.maps.LatLng( 45.752722, 4.79112),
          'zoom' : 15,
          'mapTypeId' : google.maps.MapTypeId.ROADMAP
        });
      }
      // init lorsque la page est chargée
      google.maps.event.addDomListener( window, 'load', initCarte);
 
	var myMarker = new google.maps.Marker({
	// Coordonnées du cinéma
	position: Latlng,
	map: map,
	title: "test"
	});
    </script>
	</head>
  <body>
    <h1>GeoLocalisation</h1>
    <div id="div_carte"></div>
  </body>
</html>

**NoSmoking** · 23/02/2013, 14h30

c'est typiquement le principe de l'exemple que je t’ai fourni ci dessus.

**Defqon** · 24/02/2013, 15h45

Avec ton code en fait Firefox me demande la localisation et m'affiche rien alors que je l'autorise.

Chrome me dis échec,

& IE m'affiche tout niquel a part la position qui est pas tout a fait exact ^^

Question de débutant comme faire pour voir si ça fonctionne avec un mobile, j'entends par là pour que je puisse accéder à ma page par le web ?..

GéoLocalisation HTML 5 [Débutant(e)]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager