Geocode + Reverse Geocoder

**mGraph** · 11/06/2015, 03h47

Bonjour à tous,

je commence a appréhender l'api google map, j'arrive à utiliser les éléments séparément mais c'est pas la même chose quand je les combines ...

Le script que j'ai actuellement me géolocalise et affiche des marqueurs stocké en base de donnée, j'arrive donc bien à récupérer les coordonnées de localisation mais pas l'adresse, au mieux je l'affiche dans un console.log mais impossible de le mettre dans la variable pos_adresse.

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
var pos_name;
var pos_lat;
var pos_lon;
var pos_alt;
var pos_precision;
var pos_precision_alt;
var pos_speed;
var pos_classement;
var pos_adresse;
var infowindow = new google.maps.InfoWindow();
var geocoder;
getLocation();
function getLocation() {
  geocoder = new google.maps.Geocoder();
  if (navigator.geolocation) {
    var optionsGeo = {
      timeout: 2000,
      enableHighAccuracy: true,
      maximumAge: 0
    };
    navigator.geolocation.watchPosition(showPosition, showError, optionsGeo);
  } else {
    alert('Geolocation is not supported by this browser.');
  }
}
function showPosition(position) {
  pos_name = 'myPosition';
  pos_lat = position.coords.latitude;
  pos_lon = position.coords.longitude;
  pos_alt = position.coords.altitude;
  pos_precision = position.coords.accuracy;
  pos_precision_alt = position.coords.altitudeAccuracy;
  pos_speed = position.coords.speed;
  pos_classement = 1;
  geocoder.geocode({
    'latLng': new google.maps.LatLng(pos_lat, pos_lon),
  }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        console.log('adresse : ' + results[1].formatted_address + ' ' + results[0].formatted_address);
        pos_adresse = results[1].formatted_address;
      }
    } else {
      console.log('Le geocodage a echoue pour la raion suivante : ' + status);
    }
  });
  console.log('ShowPosition - Name : ' + pos_name + ', Latitude : ' + pos_lat + ', longitude : ' + pos_lon + ', altitude : ' + pos_alt + ', precision : ' + pos_precision + ', adresse : ' + pos_adresse);
  googleMarker();
  document.getElementById('h_user_lat').value = pos_lat;
  document.getElementById('h_user_lon').value = pos_lon;
  document.getElementById('h_user_acc').value = pos_precision;
  document.getElementById('h_user_add').value = pos_adresse;
  document.getElementById('h_user_add').value = pos_adresse;
  if (typeof localStorage != 'undefined' && JSON) {
    var myCoordonnees = {
      lat: pos_lat,
      lon: pos_lon,
      alt: pos_alt,
      acc: pos_precision,
      speed: pos_speed
    };
    localStorage.setItem('myMarker', JSON.stringify(myCoordonnees));
    console.log('Mémorisation myMarker effectuée');
  } 
  else {
    console.log('localStorage n\'est pas supporté');
  }
}
function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = 'User denied the request for Geolocation.'
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = 'Location information is unavailable.'
      break;
    case error.TIMEOUT:
      x.innerHTML = 'The request to get user location timed out.'
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = 'An unknown error occurred.'
      break;
  }
}
function googleMarker() {
  var myPosition = new google.maps.LatLng(pos_lat, pos_lon); //[pos_name, pos_lat, pos_lon, pos_classement]
  console.log('sucessCallback - Name : ' + pos_name + ', Latitude : ' + pos_lat + ', longitude : ' + pos_lon + ', altitude : ' + pos_alt + ', precision : ' + pos_precision + ', adresse : ' + pos_adresse);
  var options = {
    disableDefaultUI: true,
    zoom: 17,
    center: myPosition,
    //scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map'), options);
  var myMarker = new google.maps.Marker({
    position: myPosition,
    map: map,
    title: 'votre position',
    center: new google.maps.LatLng(pos_lat, pos_lon)
  });
  var locations;
  $.ajax({
    url: '/controller/manager2.php',
    type: 'POST',
    data: {
      t: 'Point',
      a: 'get'
    },
    success: function () {
      $.getJSON('/controller/manager2.php?a=get&t=Point&lat=' + pos_lat + '&lon=' + pos_lon + '&acc=' + pos_precision, function (data) {
        //console.log('count data :' + data.length);
        locations = new Array((data.length - 1));
        $.each(data, function (key, val) {
          //console.log('#'  + val.id_i  + ' =>' +  val.title_i);
          for (var i = 0; i <= (data.length - 1); i++)
          {
            console.log(val.title_it, val.lat_i, val.lon_i, val.img_it, val.id_i);
            locations[i] = new Array(val.title_it, val.lat_i, val.lon_i, val.img_it, val.id_i);
          }
          if (typeof localStorage != 'undefined' && JSON) {
            //var coordonneesPoints = {id:val.id_i,type:val.title_it,lat:val.lat_i,lon:val.lon_i};
            //localStorage.setItem('marker' + i,JSON.stringify(coordonneesPoints));
            localStorage.setItem('PointsMarker', JSON.stringify(locations));
            console.log('Mémorisation PointsMarker effectuée');
          } 
          else {
            console.log('localStorage n\'est pas supporté');
          }
          console.log(locations);
          var infowindow = new google.maps.InfoWindow();
          var marker,
          i;
          for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i][1], locations[i][2]),
              map: map,
              title: locations[i][0],
              icon: locations[i][3] //'/images/icons/icon-marker-alerte.png'
            });
            google.maps.event.addListener(marker, 'click', (function (marker, i) {
              return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
              }
            }) (marker, i));
          }
        });
      });
    }
  });
};

EDIT : Je me suis aussi aperçu d'une erreur que je n'ai pas réussis à corriger, qui se trouve entre la ligne 109 et ~ 123.
Cette erreur concerne la boucle que j'effectue pour enregistrer les données dans le localStorage.
Quand j'effectue mon console.log j'ai bien les éléments 1, 2, 3, 4, etc ... constituant mon tableau qui s'affiche, mais dans le local storage, la construction de mon tableau me semble correcte puisque j'ai bien mais N éléments, mais le problème c'est qu'ils sont tous constitué de la dernière entrée

Merci pour votre aide

**NoSmoking** · 16/06/2015, 20h20

Bonjour,
j'ai un peu de mal à comprendre ce double appel Ajax

Code :

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

1
2
3
4
5
6
7
8
9
 $.ajax({
    url: '/controller/manager2.php',
    type: 'POST',
    data: {
      t: 'Point',
      a: 'get'
    },
    success: function () {
      $.getJSON('/controller/manager2.php?a=get&t=Point&lat=' + pos_lat + '&lon=' + pos_lon + '&acc=' + pos_precision, function (data) {

ensuite je ne comprends pas trop le but de cette double boucle

Code :

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

1
2
3
4
$.each(data, function (key, val) {
    //console.log('#'  + val.id_i  + ' =>' +  val.title_i);
    for (var i = 0; i <= (data.length - 1); i++)
        {

si data.length vaut 15 tu parcours 15 fois via le $.each et 15 fois via le for.

**mGraph** · 17/06/2015, 23h51

Bonsoir ^^

En ce qui concerne mon EDIT, j'ai réglé le problème =) ... enfin bon ce n'est pas propre mais ça fonctionne

Envoyé par NoSmoking

j'ai un peu de mal à comprendre ce double appel Ajax

Mouais ... je débute en Ajax, javascript et c'est pas glorieux ^^, j'ai un peu tout mélangé, c'est donc corrigé, pu de double appel =)

Envoyé par NoSmoking

ensuite je ne comprends pas trop le but de cette double boucle

Je ne sais pas si mon raisonnement est bon mais voilà comment j'ai procédé.
J'ai X points à afficher, et ils ont tous des clefs/valeurs dont j'ai besoin. je procède donc à un tableau de 2 dimensions.
Je me sert donc de each pour créer le tableau.
Cette méthode ne me semble pas propre non plus, mais elle fonctionne, alors que la seconde que j'ai tenté de mettre en place non ^^

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 try {
var locations= JSON.parse(data);
            for (var i = 0; i < locations.length; i++) {
                var obj = locations[i];
                for (var key in obj) {
                    console.log(i + '  : '  + key  + ' => '  + obj[key]);
                }
            }
 }
        catch (e) {
            console.log(e);
        }

Voici l'erreur correspondant au Try

SyntaxError: Unexpected token o
at Object.parse (native)
at Object.success (http://www.xxx.fr/js/google-map.js:148:41)
at f.Callbacks.o (https://ajax.googleapis.com/ajax/lib...min.js:2:14733)
at Object.f.Callbacks.p.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/lib...min.js:2:15502)
at w (https://ajax.googleapis.com/ajax/lib...min.js:4:12491)
at XMLHttpRequest.f.support.ajax.f.ajaxTransport.send.d (https://ajax.googleapis.com/ajax/lib...min.js:4:18318)

J'ai donc pas mal rebossé sur ma carte, et hors le problème de reverse Geocode est toujours présent, j'ai maintenant un problème de watchposition qui fonctionnait très bien sous l'ancienne version ...
Pour la petite histoire

hier à chaque reload de la position il me mettait un marker ... boh c'est cool, c'est marrant mais en 5min on ne voit plus rien, j'ai donc rajouté à ma fonction navigator.geolocation.clearWatch(watchID); et depuis pu de reload, j'imagine que ce n'est pas seulement du à ce changement, mais je ne vois pas ce qui peut interférer.

Le nouveau code

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
var pos_name;
var pos_lat;
var pos_lon;
var pos_alt;
var pos_precision;
var pos_precision_alt;
var pos_speed;
var pos_classement;
var pos_adresse;
 
var geocoder;
var map;
var myPosition;
var infowindow;
var watchID;
 
var dateDay = new Date(); 
var dateHours = dateDay.getHours();
 
function initializeMap(){
	if((dateHours <= 19) || (dateHours >= 7)) {sunMap();}
	else{nightMap();}
 
    getLocation();
	console.log(dateHours);
 
}
 
function getLocation() {
	 geocoder = new google.maps.Geocoder();
    if (navigator.geolocation) {
        var optionsGeo = {timeout:5000, enableHighAccuracy : true, maximumAge : 0};
		watchID = navigator.geolocation.watchPosition(showPosition,showError,optionsGeo);
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}
function sunMap(){
    var options = {
        disableDefaultUI: true,zoom: 16,
		mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	 map = new google.maps.Map(document.getElementById('map'), options);
}
 
function nightMap(){
	var MY_MAPTYPE_ID = 'night_style';
    var options = {
        disableDefaultUI: true,zoom: 16,
		mapTypeId: MY_MAPTYPE_ID
    };
	var featureOpts = [{"stylers":[{"hue":"#ff1a00"},{"invert_lightness":true},{"saturation":-100},{"lightness":33},{"gamma":0.5}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2D333C"}]},{ "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#0b434f" }, { "lightness": 25 } ] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [ { "color": "#000000" } ] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "color": "#0b3d51" }, { "lightness": 16 } ] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [ { "color": "#000000" } ] },];
	map = new google.maps.Map(document.getElementById('map'), options);
	var styledMapOptions = {name: 'Night Style' };
	var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
	map.mapTypes.set(MY_MAPTYPE_ID, customMapType); 
}
 
function showPosition(position) {
    pos_lat = position.coords.latitude;
    pos_lon = position.coords.longitude;
    pos_alt = position.coords.altitude;
    pos_precision = position.coords.accuracy;
    pos_precision_alt = position.coords.altitudeAccuracy;
    pos_speed = position.coords.speed;
    pos_classement = 1;
    myPosition = new  google.maps.LatLng(pos_lat, pos_lon);
 
    geocoder.geocode({'latLng': myPosition}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            pos_adresse =  results[0].formatted_address;
        }
        else {console.log("Le geocodage a echoue pour la raion suivante : " + status);}
   });
 
    pos_name = '<div><strong>Votre position</strong></div><div>' + pos_adresse + '</div><div><em>Lat : ' + pos_lat + '; Lon : ' + pos_lon +'</em></div>';
    //console.log("ShowPosition - Name : " + pos_name + ", Latitude : " + pos_lat + ", longitude : " + pos_lon + ", altitude : " + pos_alt + ", precision : " + pos_precision + ", adresse : " + pos_adresse);
 
	// sauvegarde dans hiddenFields
    $elem_id("h_user_lat").value  = pos_lat;
    $elem_id("h_user_lon").value  = pos_lon;
    $elem_id("h_user_acc").value  = pos_precision;
	$elem_id("h_user_add").value  = pos_adresse;
 
    // sauvegarde dans localStorage
	if(typeof localStorage!='undefined' && JSON) {
		var myCoordonnees = {lat:pos_lat,lon:pos_lon,alt:pos_alt,acc:pos_precision,speed:pos_speed,add:pos_adresse};
		localStorage.setItem('myMarker',JSON.stringify(myCoordonnees));
		console.log("Memorisation myMarker effectuee");
	}
	else {console.log("localStorage n'est pas supporte");}
 
	myCurrentPosition();
    incidentMarker();
}
 
function myCurrentPosition(){
	navigator.geolocation.clearWatch(watchID);
	var currentPositionMarker = new google.maps.Marker({map: map,position: myPosition,title: 'Votre position',icon: '/images/icons/icon-marker-car.png', center: myPosition});
 
	infowindow = new google.maps.InfoWindow({content: pos_name});
    google.maps.event.addListener(currentPositionMarker, 'click', function(){
       infowindow.open(map,currentPositionMarker);
    });
    map.panTo(myPosition);
}
 
function addMarker(position,image,title){
    var marker = new google.maps.Marker({
        position: position,
        map: map,
        title : title,
        icon: image
    });
    infowindow = new google.maps.InfoWindow({content: title});
    google.maps.event.addListener(marker, 'click', function(){
       infowindow.open(map,marker);
    });
}
 
function incidentMarker(){
    var locations;
    $.getJSON('/controller/manager2.php?a=get&t=incident&lat=' + pos_lat + '&lon=' + pos_lon + '&acc=' + pos_precision, function (data) {
 
        if (typeof localStorage != 'undefined' && JSON) {
            localStorage.setItem('incidentsMarker', JSON.stringify(data));
            console.log("Memorisation incidentsMarker effectuee");
        }
        else {console.log("localStorage n'est pas supporte");}
 
 
        //console.log('count data :' + data.length);
        locations = [(data.length - 1)];
        $.each(data, function (key, val) {
 
            //console.log('#'  + val.id_i  + ' =>' +  val.title_i);
 
            for (var i = 0; i <= (data.length - 1); i++) {
                console.log(val.title_it, val.lat_i, val.lon_i, val.img_it, val.id_i);
                locations[i] = Array(val.title_it, val.lat_i, val.lon_i, val.img_it, val.id_i);
            }
 
            for (var i = 0; i < locations.length; i++) {
            console.log(locations[i][1] + ', ' + locations[i][2] + ', ' + locations[i][3],titleString);
                var posMarker = new google.maps.LatLng(locations[i][1], locations[i][2]);
                var titleString = '<div><strong>'+ locations[i][0] + '</strong></div><div><a href="#' + locations[i][4] + '">voir les commentaires ...</a></div>'
                addMarker(posMarker, locations[i][3],titleString);
            }
        });
    });
}
 
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
 google.maps.event.addDomListener(window, 'load', initializeMap);

**NoSmoking** · 18/06/2015, 22h58

Plusieurs points à corriger le principal étant une erreur de logique.

Dans ta fonction showPosition tu fais appel à une fonction asynchrone, donc le résultat n'est pas immédiatement disponible, et ton script continu de se dérouler ce qui fait que ta variable pos_adresse n'est pas encore initialisé.

Il te faut dans ce cas mettre dans la fonction de retour le code que tu souhaites exécuter au retour de ta requête.

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
    geocoder.geocode({
        'latLng': myPosition
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            pos_adresse = results[0].formatted_address;
            //-------------------------------------------------------
            // ICI tu mets ce que tu veux faire en retour par exemple
            //-------------------------------------------------------
            pos_name = '<div><strong>Votre position</strong></div><div>' + pos_adresse + '</div><div><em>Lat : ' + pos_lat + '; Lon : ' + pos_lon + '</em></div>';
            // sauvegarde dans hiddenFields
            $elem_id("h_user_lat").value = pos_lat;
            $elem_id("h_user_lon").value = pos_lon;
            $elem_id("h_user_acc").value = pos_precision;
            $elem_id("h_user_add").value = pos_adresse;
            // et la suite...
        } else {
            console.log("Le geocodage a echoue pour la raion suivante : " + status);
        }
    });

Concernant la boucle $.each, tu disposes de toutes les données sans avoir besoin de passer par un tableau temporaire
exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
  var data = [
    { lat:44.837368, lon:-0.576144, titre:'Bordeaux',  info:'<b>Bordeaux</b><br>la suite du texte...'},
    { lat:45.194276, lon:5.731633,  titre:'Grenoble',  info:'<b>Grenoble</b><br>la suite du texte...'},
    { lat:45.767299, lon:4.834329,  titre:'Lyon',      info:'<b>Lyon</b><br>la suite du texte...'},
    { lat:43.297612, lon:5.381042,  titre:'Marseille', info:'<b>Marseille</b><br>la suite du texte...'},
    { lat:48.856667, lon:2.350987,  titre:'Paris',     info:'<b>Paris</b><br>la suite du texte...'}
  ];
  $.each( data, function( key, val){
    console.log( val);
  });

regarde ce qui se trouve dans la console

Object {lat: 44.837368, lon: -0.576144, titre: "Bordeaux", info: "<b>Bordeaux</b><br>la suite du texte..."}
Object {lat: 45.194276, lon: 5.731633, titre: "Grenoble", info: "<b>Grenoble</b><br>la suite du texte..."}
Object {lat: 45.767299, lon: 4.834329, titre: "Lyon", info: "<b>Lyon</b><br>la suite du texte..."}
Object {lat: 43.297612, lon: 5.381042, titre: "Marseille", info: "<b>Marseille</b><br>la suite du texte..."}
Object{lat: 48.856667, lon: 2.350987, titre: "Paris", info: "<b>Paris</b><br>la suite du texte..."}

donc tu peux directement exploiter cela comme ceci

Code :

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

1
2
3
4
5
  $.each(data, function(key, val) {
      var posMarker = new google.maps.LatLng(val.lat, val.lng);
      var titleString = '<div><strong>' + val.titre + '</strong><br>' + val.info + '</div>';
      addMarker(posMarker, '', titleString);
  });

**mGraph** · 19/06/2015, 01h41

Sal..... d'asynchrone ^^ mais au moins je pige mieux la logique, il ne faut donc déclencher aucun autre événement tant que le retour du précédent n'est pas la

c'est donc ok pour pour le reverse geocode merci beaucoup ^^
Mais le hic comme y'a toujours un hic lool, depuis les modifs mon watchposition causes toujours des problèmes, j'ai essayé de mettre la création de mon marker à plusieurs endroits différents mais toujours les mêmes résultats; avec navigator.geolocation.clearWatch(); pu de de suivie du marker obligé de reload la map manuellement, et sans le clearwatch voilà ce que j'ai ^^

Nom : pb_marker.jpg
Affichages : 312
Taille : 17,4 Ko

Nom : pb_marker.jpg
Affichages : 312
Taille : 17,4 Ko

Concernant le $each, je me suis appuyé sur des tutos, et beaucoup utilisé une manière similaire,je plus j'avais un retour sur la console un peux bizarre du type Object {Object}, Object donc ne maîtrisant pas le jquery je suis tombé dans le panneau.
Et donc pour pousser un peu le truc

, si j'utilisais un tableau à 4 dimensions je devrais utiliser un simple $.each ou je serai là par contre obligé d'imbriquer avec d'autres for each ?

**NoSmoking** · 24/06/2015, 22h52

(..)depuis les modifs mon watchposition causes toujours des problèmes

Il ne te faut pas recréer un marqueur à chaque lecture de position venant de la "geolocation" mais simplement modifier la position du marqueur de "suivi".

si j'utilisais un tableau à 4 dimensions je devrais utiliser un simple $.each ou je serai là par contre obligé d'imbriquer avec d'autres for each ?

le $.each est une boucle un peu comme le for(...) donc oui il te faut faire une boucle pour chaque niveau.

Geocode + Reverse Geocoder [Google Maps]

APIs Google

Discussions similaires

Partager

Partager