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);
}

[NoSmoking]

j'ai un peu de mal à suivre ta logique
dans google.maps.event.addListener(map, 'click', function(event), tu récupères event.latLng que tu passes à la fonction calculatDistMarkers(event.latLng); et dans cette fonction tu le fait suivre à la fonction query(location, travelmodev).

Maintenant dans cette même fonction je ne saisie pas pourquoi tu le retravailles au corps pour au final recréer un new google.maps.LatLng(lat, lng); que tu vas transmettre pour requête.

[xillibit]

Maintenant dans cette même fonction je ne saisie pas pourquoi tu le retravailles au corps pour au final recréer un new google.maps.LatLng(lat, lng); que tu vas transmettre pour requête.

Sans ça ou avec, ça me fait toujours cette erreur : Valeur incorrecte pour la propriété <address> : (45.77214794736495, 6.354324077642332)

J'ai essayé pas mal de trucs sans succés

[NoSmoking]

je ne vois pas d'erreur comme cela vite fait, pourrait on connaître les valeurs que tu passes, ou que tu récupères.

nota : dans tout ce qui a été mis aucune vérification n'est faite en cas de réponse NOK!

[culturemediatic]

Bonjour,

J'ai a peu près le même problème pour lequel je n'ai trouvé qu'une réponse partielle.

J'ai réussi à trier les distances et temps de trajet du plus près au plus loin, mais il m'a gardé l'ordre des théâtres d'origine.
-> CF http://www.sortir-au-theatre.com/?page=liste_theatres

Je n'ai donc pas réussi à trier les adresses et Logo et lien vers la fiche théâtre associée -> ils ne correspondent pas au kilométrage (et inversement :-) )

J'ai trié [results] mais il ne me prend pas en compte le reste.

Vous pouvez télécharger le code d'origine ici : http://www.sortir-au-theatre.com/liste_theatres.zip

Tout est donc faussé. Vous pouvez tester en vous rendant sur les fiches (le kmtrage ne correspond pas).

J'ai oublié quelque chose mais quoi ?

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
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
 
// tri des donnees ordre croissant1
results.sort( function( a, b){
return( a.distance.value - b.distance.value);
});
 
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
 
outputDiv.innerHTML += "<a href='" + url[j] + "' rel='external'><img src='" + logo[j] + "' width='100%'/><br />"
outputDiv.innerHTML += destinations[j]
outputDiv.innerHTML +=  "<br /><strong>Vous êtes à " + results[j].distance.text + " de ce théâtre</strong><br /> Durée de trajet : "
+ results[j].duration.text + "<br /></a><hr />";
}
}
}
}

Merci les amis ...