Discussion :

[bplus]

Bien le bonjour lecteurs,

Je souhaiterai générer un itinéraire a plusieurs point comme ceci:
Cliquer moi dessus

Je voudrai introduire ceci dans mon site via l'API de Google Map. J'ai déjà réussis en faisant 2 points.

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
function calcRoute() { // Calcul de l'itinéraire.
    var directionsService = new google.maps.DirectionsService();
    var start = document.getElementById("entry_1").value;
    var end = document.getElementById("entry_2").value;
    if (start != '' && end != '') {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }
    else
        alert("Veuillez saisir un lieu de départ ET d'arrivée.");
}

J'avais l'idée de générer les itinéraires comme ceci:
Départ -> Point 1
Point 1 -> Point 2
Point N-1 -> Point N
Point N -> Fin

J'ai donc adapter ma fonction calcRoute() comme ceci:

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
function calcRouteBis(pointA, pointB) { // Calcul de l'itinéraire.
    var directionsService = new google.maps.DirectionsService();
    var start = pointA;
    var end = pointB;
    if (start != '' && end != '') {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }
    else
        alert("Veuillez saisir un lieu de départ ET d'arrivée.");
}

Je récupère toutes les destinations dans une Array et boucle dessus comme ceci:

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
function CalculAvecPoints(){
	var tableau = new Array();
 
	if(document.getElementById('entry_1').value != ""){
		alert(document.getElementById('entry_1').value);
		tableau.push(document.getElementById("entry_1").value);
	}
	if(document.getElementById('point_0').value != ""){
		alert(document.getElementById('point_0').value);
		tableau.push(document.getElementById('point_0').value);
	}
 
	if(document.getElementById('point_1').value != ""){
		alert(document.getElementById('point_1').value);
		tableau.push(document.getElementById('point_1').value);
	}
 
	if(document.getElementById('point_2').value != ""){
		alert(document.getElementById('point_2').value);
		tableau.push(document.getElementById('point_2').value);
	}
 
	if(document.getElementById('point_3').value != ""){
		alert(document.getElementById('point_3').value);
		tableau.push(document.getElementById('point_3').value);
	}
 
	if(document.getElementById('point_4').value != ""){
		alert(document.getElementById('point_4').value);
		tableau.push(document.getElementById('point_4').value);
	}
 
	if(document.getElementById('entry_2').value != ""){
		alert(document.getElementById('entry_2').value);
		tableau.push(document.getElementById("entry_2").value);
	}
 
	for(var i=0; i+1 < tableau.length; i++){
		calcRouteBis(tableau.valueOf(i),tableau.valueOf(i+1));
	}
}

J'arrive bien a récupérer les adresses, mais ça n'a pas l'air de fonctionner, sauriez-vous comment faire ?

Merci d'avance

Cordialement

bplus

[NoSmoking]

Bonsoir,
il te faut rajouter les points, "étape", dans les options de ton google.maps.DirectionsService, en utilisant la propriété waypoints avec le format qui va bien.
exemple

Code :

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

1
2
3
4
'waypoints': [
    { 'location':'Paris'},
    { 'location':'Nantes'}
  ],

google.maps.DirectionsService

[bplus]

Merci NoSmoking c'est exactement ça