Gestion des function()

Bonjour à tous,

Je code un petit programme qui affiche sur une carte le parcours d'un véhicule via des coordonnées latitude/longitude.
Jusqu'ici aucun problème en soit, j'arrive sans problème à afficher le parcours "manuellement", le problème c'est quand je cherche à "automatiser" le programme.

Je m'explique : Je récupère mes coordonnées via une requête sur ma base de données, or chaque véhicule n'a pas le même nombre de couple latitude/longitude et j'ai donc cherché à faire en sorte que le programme s'adapte au nombre de couple.

Et la ça ne marche plus, il ne m'affiche plus que le premier couple et le dernier. Les autres ont disparu.

Voilà le code :

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
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
 
      <?php echo "var tab_lat = '".implode("<>", $resultat_lat)."'.split('<>');"; ?>
      <?php echo "var tab_lng = '".implode("<>", $resultat_lng)."'.split('<>');"; ?>
 
      var map;
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var directionDisplay2;
      var directionsService2 = new google.maps.DirectionsService();
 
 
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var depart = new google.maps.LatLng(parseFloat(tab_lat[0]),parseFloat(tab_lng[0]));
        var myOptions = {
          zoom:5,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: depart,
          streetViewControl: false,
          mapTypeControl: false,
          panControl: false,
          scrollwheel: false
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
 
        calcRoute();
 
        for(i = 2; i < tab_lat.length ; i++) {
            calcRoute2();
          }
      }
 
      	function calcRoute() {
 
        	var request = {
          		origin:{lat: parseFloat(tab_lat[0]), lng: parseFloat(tab_lng[0])}, 
          		destination:{lat: parseFloat(tab_lat[1]), lng: parseFloat(tab_lng[1])},
          		travelMode: google.maps.DirectionsTravelMode.DRIVING
        	};
        	var polylineOp = {
          		strokeColor:"blue" 
          	};
        	var renderOptions = {
          		polylineOptions : polylineOp
        	}; 
 
        	directionsDisplay = new google.maps.DirectionsRenderer(renderOptions);
 
        	directionsDisplay.setMap(map);
 
        	directionsService.route(request, function(response, status) {
          		if (status == google.maps.DirectionsStatus.OK) {
            		directionsDisplay.setDirections(response);
          		}
        	});
      	}
 
 
      function calcRoute2() {
 
        var request = {
          origin:{lat: parseFloat(tab_lat[i-1]), lng: parseFloat(tab_lng[i-1])}, 
          destination:{lat: parseFloat(tab_lat[i]), lng: parseFloat(tab_lng[i])},
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        var polylineOp = {
          strokeColor:"blue" // la couleur de la route : rouge
        };
        var renderOptions = {
          polylineOptions : polylineOp
        }; 
 
        directionsDisplay2 = new google.maps.DirectionsRenderer(renderOptions);
 
        directionsDisplay2.setMap(map);
 
        directionsService2.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay2.setDirections(response);
          }
        });
      }

J'utilise l'api Google Map.
J'ai encore un peu de mal avec la façon dont les fonctions interagissent entre elles, je pense d'ailleurs que le problème vient de là, mais malgré mes recherches et mes multiples tentatives, je ne vois pas le bout du tunnel.