[Google Maps] Itinéraire à 3 points

Itinéraire à 3 points

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:

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:

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:

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

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:

1 2 3 4 'waypoints': [ { 'location':'Paris'}, { 'location':'Nantes'} ],
:fleche: google.maps.DirectionsService

Merci NoSmoking c'est exactement ça :ccool: