Discussion :

[xillibit]

Bonjour,

Avec l'API GoogleMaps v3, je voudrais que l'utilisateur entre son adresse et qu'ensuite cela recherche les markers à proximité. Les markers
sur la carte sont affichés par l'intermédiaire d'un kml et donc pour les manipuler après en javascript ce n'est pas simple.

Auriez-vous une idée de la façon que je peux faire cela ?

Merci d'avance

[xillibit]

Au lieu d'utiliser un kml, j'ai tout fait en javascript. J'arrive à faire un requête avec distance matrix et à obtenir le résultat. Le souci c'est que je tri les distances obtenues par ordre croissant et donc ça ne correspond plus au coordonnées de destination, voici un morceau de code, j'espère que vous pourrez m'aider :

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
function callback2(response, status) {
   if (status != google.maps.DistanceMatrixStatus.OK) {
	alert('Erreur : ' + status);
   } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;    
 
 
    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
        var element = results[j];               
        distancearray.push( element.distance.value );
        durationarray.push( element.duration.value );       
 
      }
    } 
    distancearray.sort(compareNumbers); 
    durationarray.sort(compareNumbers);
    var dist =    distancearray.splice(0, 2);    
    var dur =   durationarray.splice(0, 2);
 
    for (var i = 0; i < distancearray.length; i++ ) {
		addMarker(origins);		
		alert(distancearray[i]);
		//document.getElementById('outputDiv').innerHTML += " PAV : " + dist[i] + " à " + dur[i] + "<br />";
	}
 
  }
}

[NoSmoking]

Bonjour,
je pense que ton approche n'est pas la bonne, il faut que tes éléments de réponse soient liés entre eux, cela peut être un tableau multidirectionnel, un tableau d'objet par exemple dans lequel tu mets directement les elements.
Il suffit ensuite d'adapter la fonction de tri.

[xillibit]

J'y avais pensé après, le souci c'est que je ne sais pas comment faire pour trier une colonne particulière d'un tableau multidimensionnel

[NoSmoking]

Lorsque l'on observe la structure de la réponse on peut voir qu'il n'y a pas de liason directe entre les données résultat, rows, et la ville de destination, destinationAddresses, si ce n'est l'indice dans les tableaux.

[] destinationAddresses
  [0] "Destination #1"
  [1] "Destination #2"
  [2] "Destination #3"
  ...etc...
[] originAddresses
  [0] "Depart #1"
  [1] "Depart #2"
  ...etc...
[] rows                // correspond aux reponses pour chaque originAddresses
  [0]                  // resultat pour "Depart #1"
    +- elements        // correspond aux reponses pour chaque destinationAddresses
      [0]              // resultat pour "Destination #1"
        +- distance
          +- text
          +- value
        +- duration
          +- text
          +- value
        +- status
      [1]              // resultat pour "Destination #2"
        +- distance
      ...etc...
  [1]                  // resultat pour "Depart #2"
    +- elements
      [0]
        +- distance
      ...etc...

c'est sur le tableau des elements, via la clé distance, que l'on veut faire le tri, mais il manque la référence à la ville il faut donc que l'on attache la référence de la ville, destinationAddresses, à chaque résultat afin d'obtenir une structure du type

    +- elements  // correspond aux reponses pour chaque destinationAddresses
      [0]
        +- distance
          +- text
          +- value
        +- duration
          +- text
          +- value
        +- status
        +- ville  // on doit ajouter cette reference
      [1]
        +- distance
      ...etc...

pour cela il faut dans la boucle faire l'affectation

Code :

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

1
2
3
4
5
// affectation des villes
tabData = response.rows[i].elements;
for( var ind = 0; ind < tabData.length; ind++){
  tabData[ind].ville = response.destinationAddresses[ind];
}

une fois cela réalisé on peut faire le tri via la méthode sort des Array, en triant par distance par exemple.

Code :

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

1
2
3
4
// tri des donnees ordre croissant sur la cle distance
tabData.sort( function( a, b){
    return( a.distance.value - b.distance.value);
  });

il suffit en final d'utiliser results[j].ville pour l'affichage de la ville et non plus destinationAddresses[j], qui n'aura subit aucune modification.

Le code complet de la fonction peut ressembler à cela

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
function callback( response, status){
 
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Erreur : ' + status);
  }
  else {
    var outputDiv = document.getElementById('outputDiv');
    outputDiv.innerHTML = '';
 
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var results, ind, tabData;
    // parcours des donnes de chaque origine
    for( var i = 0; i < origins.length; i++) {
      results = response.rows[i].elements;
 
      // affectation des villes
      tabData = response.rows[i].elements;
      for( var ind = 0; ind < tabData.length; ind++) {
        tabData[ind].ville = response.destinationAddresses[ind];
      }
      // tri des donnees ordre croissant
      tabData.sort( function( a, b){
          return( a.distance.value - b.distance.value);
        });
      // parcours des donnes de chaque destination
      for( var j = 0; j < results.length; j++){
        // ici on recupere ville et non destination qui n'a pas ete trie
        outputDiv.innerHTML += origins[i] + " -> " + results[j].ville + ": "
            + results[j].distance.text + " en "
            + results[j].duration.text + "<br>";
      }
    }
  }
}

[xillibit]

Merci ça m'a bien aidé

Maintenant, j'ai un autre souci, quand l'utilisateur clicke sur la carte ça récupére les coordonnées de l'endroit ou il a cliqué
et ça fait une requête avec distance matrix. Mais je comprends pourquoi j'ai cette erreur : Valeur incorrecte pour la propriété <address> : (45.77214794736495, 6.354324077642332)
C'est au niveau de l'adresse d'origine de la requête distance matrix que cela se produit, pourtant on a le droit de passé ceci new google.maps.LatLng(45.77214794736495, 6.354324077642332) pour l'adresse d'origine.

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
function initialize() {
	var opts = {
	center: new google.maps.LatLng(45.76161017250319, 6.284972881353269),
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map'), opts);
	geocoder = new google.maps.Geocoder();
 
	google.maps.event.addListener(map, 'click', function(event) {
		getAdressLocation(event.latLng); 		 
		if (markers_list.length != 0) {
			clearMap(); 
		}		
		calculatDistMarkers(event.latLng);	     
	});		 
}
 
function calculatDistMarkers(location) {
	var list = document.getElementById('travelmode');
	travelmodev = list.options[list.selectedIndex].value;	
 
	query(location, travelmodev);
    query2(location, travelmodev);    
}
 
function query(location, travelm) {
	if( location != ''  ) {
		alert(location);
		var lat = parseFloat(location.lat());
		var lng = parseFloat(location.lng());
		var latlng = new google.maps.LatLng(lat, lng);
		alert(latlng);
		useradress=latlng;
	}	 
	if( travelm != '' ) travelmodev=travelm;	
 
	var service = new google.maps.DistanceMatrixService();	
    service.getDistanceMatrix(
    {
		origins: [useradress],
        destinations: destinations,
        travelMode: google.maps.TravelMode[travelmodev],
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
	}, callback);
}