Itinéraire de plusieurs points d'une bdd mysql

Version imprimable

23/10/2013, 11h36
nolookpass8

Itinéraire de plusieurs points d'une bdd mysql

Bonjour,

Est-il possible lorsque l'on clique sur un bouton par exemple d'être envoyé sur une page contenant une map avec plusieurs markers et l'itinéraire du point a en passant par b et c et finissant à d ?

J'arrive soit à afficher les markers ou soit un itinéraire de a vers d (sans les waypoints) mais l'itinéraire à partir de liste déroulante alors que j'aimerai arriver directement dessus l'itinéraire.

Plus clairement, je veux que la fonction load() qui a pour but d'initialiser la map (et qui pour l'instant charge bien tous les markers de ma bdd) initialise aussi l'itinéraire entre 2 points.

Ma fonction load():

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
function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418), 
        zoom: 13,
        mapTypeId: 'satellite'
      });
      var infoWindow = new google.maps.InfoWindow;
 
      // downloadUrl génère le fichier xml
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
		  var tourId = markers[i].getAttribute("tourId");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

Merci.

23/10/2013, 21h37
NoSmoking

Bonjour,
qu'est ce qui t'empêche de lancer une requête dans ta fonction load ()via un new google.maps.DirectionsService()?

Merci pour vos réponses,

Je viens de voir votre message, j'ai fais autrement :

fichier php :

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
<b>Depart du circuit (Point A) :</b> <?php echo $pointDepart ; ?>
 
    <input type="hidden" id="start" value="<?php  echo $coordDepart ; ?>"/>
 
	<br /><br />
 
	<b>Etapes :</b> <br>
    <select multiple id="waypoints">
      <option value="1301 Alaskan Way, Seattle, WA ">1301 Alaskan Way, Seattle, WA </input>
      <option value="2234 2nd Ave, Seattle, WA">2234 2nd Ave, Seattle, WA</input>
    </select>
 
	<br /><br />
 
    <b>Arrivee :</b> <?php echo $pointDestination ; ?>
 
	<input type="hidden" id="end" value="<?php  echo $coordDestination ; ?>"/>
 
	<br />
	<br />
 
	<input type="submit" onclick="itineraire();" value="Calculer">
 
	<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>

fichier de fonctions js :

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
function itineraire() {
		  var start = document.getElementById('start').value;
		  var end = document.getElementById('end').value;
		  var waypts = [];
		  var checkboxArray = document.getElementById('waypoints');
		  for (var i = 0; i < checkboxArray.length; i++) {
			if (checkboxArray.options[i].selected == true) {
			  waypts.push({
				  location:checkboxArray[i].value,
				  stopover:true});
			}
		  }
 
		  var request = {
			  origin: start,
			  destination: end,
			  waypoints: waypts,
			  optimizeWaypoints: true,
			  travelMode: google.maps.TravelMode.DRIVING
		  };
		  directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
			  directionsDisplay.setDirections(response);
			  var route = response.routes[0];
			  var summaryPanel = document.getElementById('warnings_panel');
			  summaryPanel.innerHTML = '';
			  // For each route, display summary information.
			  for (var i = 0; i < route.legs.length; i++) {
				var routeSegment = i + 1;
				summaryPanel.innerHTML += '<b>Itinéraire ' + routeSegment + '</b><br>';
				summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
				summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
				summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br><br>';
			  }
			}
		  });
	}

J'ai créé une fonction onload() qui permet de chargé les 2 fonctions load() et itineraire() au chargement de la page :

Code:

1
2
3
4
function onload(){ 
		load(); 
		itineraire(); 
	}

pour :

Code:

<body onload="onload()">

Pour l'instant mon système charge bien dès le début la distance entre le départ et l'arrivée. Il me manque juste l'étape, qui ne s'exécute que par un clique sur le bouton calculer via une checkbox. Je n'arrive pas à chargé aussi l'étape via un input hidden comme le départ et l'arrivée ..

Code:

1
2
3
4
5
6
7
8
var waypts = [];
	    var checkboxArray = document.getElementById('waypoints');
	    for (var i = 0; i < checkboxArray.length; i++) {
			if (checkboxArray.options[i].selected == true) {
			    waypts.push({
				    location:checkboxArray[i].value,
				    stopover:true});
			}

En fait c'est ici où il faut que j'adapte mon code pour un input hidden à la place d'une checkbox mais j'ai essayé pas mal de choses sans succès ..

J'ai géré mon problème avec wayPointArray.

Dernier petit soucis : l'infobulle affichée à chaque marker m'affiche bien l'adresse mais je ne vois pas du tout dans mon code où l'a modifier en y ajoutant un descriptif et une img par exemple.

Si quelqu'un pouvait m'aider : (je pense que c'est dans ma function itineraire())

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
 
function itineraire() {
	    var start = document.getElementById('start').value;
	    var end = document.getElementById('end').value;
		wayPointArray = new Array();//création d'un tableau vide
		var waypoints1 = document.getElementById('waypoints1').value;//récupération de la lat et la lng des waypoints via hidden
		var waypoints2 = document.getElementById('waypoints2').value;
		wayPointArray.push({location: waypoints1, stopover: true},
						   {location: waypoints2, stopover: false}); 
 
		var request = {
			origin: start,
			destination: end,
			waypoints: wayPointArray,
			optimizeWaypoints: true,
			travelMode: google.maps.TravelMode.DRIVING,
			avoidHighways: true
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
				var route = response.routes[0];
				var summaryPanel = document.getElementById('warnings_panel');
				summaryPanel.innerHTML = '';
 
				for (var i = 0; i < route.legs.length; i++) {
					//var routeSegment = i + 1;
					//summaryPanel.innerHTML += '<b>Itinéraire ' + routeSegment + '</b><br>';
					summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
					summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
					summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br>';
					summaryPanel.innerHTML += '<b>Durée : ' + route.legs[i].duration.text + '</b><br><br>';
				}
			}
		});
	}

24/10/2013, 20h02
NoSmoking

Citation:

Si quelqu'un pouvait m'aider : (je pense que c'est dans ma function itineraire())

je ne le pense pas, je dirais que cela se passe dans ta fonction load() à preuve ce petit morceau de code

Code:

bindInfoWindow(marker, map, infoWindow, html);

Merci pour vos réponses.

J'ai cependant un nouveau code maintenant où je n'ai plus le bindInfoWindow ni le infoWindow. Sans ça j'ai quand même des markers avec leur infobulle.

Soit elles s'activent par défaut soit je ne vois pas où ça peut être dans 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
var map;
	var directionsDisplay;
	var directionsService;
 
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.2183710,-1.5536210), 
        zoom: 8, 
        mapTypeId: 'roadmap' 
      });
 
	  directionsService = new google.maps.DirectionsService();
 
	  var rendererOptions = {
		map: map
	  }
	  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    }
 
	function itineraire() {
	    var start = document.getElementById('start').value;//hidden start
	    var end = document.getElementById('end').value;//hidden end
		wayPointArray = new Array();//création d'un tableau vide
		var waypoints1 = document.getElementById('waypoints1').value;//récupération de la lat et la lng des waypoints via hidden
		var waypoints2 = document.getElementById('waypoints2').value;
		var waypoints3 = document.getElementById('waypoints3').value;
		var waypoints4 = document.getElementById('waypoints4').value;
		var waypoints5 = document.getElementById('waypoints5').value;
		wayPointArray.push({location: waypoints1, stopover: true},
						   {location: waypoints2, stopover: false},
						   {location: waypoints3, stopover: true},
						   {location: waypoints4, stopover: true},
						   {location: waypoints5, stopover: false});
 
		var request = {
			origin: start,
			destination: end,
			waypoints: wayPointArray,
			optimizeWaypoints: true,
			travelMode: google.maps.TravelMode.DRIVING,
			avoidHighways: true
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
				var route = response.routes[0];
				var summaryPanel = document.getElementById('warnings_panel');
				summaryPanel.innerHTML = '';
 
				for (var i = 0; i < route.legs.length; i++) {
					summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
					summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
					summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br>';
					summaryPanel.innerHTML += '<b>Durée : ' + route.legs[i].duration.text + '</b><br><br>';
				}
			}
		});
	}
 
	function onload(){ 
		load(); 
		itineraire(); 
	}

25/10/2013, 12h44
NoSmoking

Citation:

Sans ça j'ai quand même des markers avec leur infobulle.

maintenant il te faut mettre l'option suppressInfoWindows du google.maps.DirectionsRenderer à true.
25/10/2013, 13h32
nolookpass8
Code:

1 2 3 4 5 var rendererOptions = { map: map, suppressInfoWindows: true };
Oui j'avais déjà vu cette option, ça enlève bien l'infobulle par défaut.
Maintenant avec le code de mon post précédent j'aimerai afficher une infobulle personnalisé pour tous les markers mais je vois pas comment.
25/10/2013, 14h08
NoSmoking

Il est bien une chose qui ne te caractérise pas c'est la constance dans le suivi. :aie:

Citation:

Maintenant avec le code de mon post précédent j'aimerai afficher une infobulle personnalisé pour tous les markers mais je vois pas comment.

c'est cette fonction qui le fait comme dit précédement

Citation:

bindInfoWindow(marker, map, infoWindow, html);

avec la variable html initialisé juste avant.

C'est le grand retour vers le passé, on s'éloigne également du sujet d'origine ce qui n'aide pas à suivre sereinement cette discussion.

1 pièce(s) jointe(s)

J'ai peut-être mal expliqué mon problème je pense donc je vais essayer d'être beaucoup plus claire désormais.

Alors tout d'abord voici un imprim-écran de l'appli ce qui pourra rendre mon problème plus compréhensible :

Pièce jointe 129576

Ici on peut voir un marker bleu (un restaurant) et son infowindow, c'est ce que je veux.

Mon problème se situe pour les markers générés par le calcul de l'itinéraire c'est-à-dire directionService. Pour chaque point A, B ou C (le point C comme dans mon imprim-écran) je ne souhaite pas avoir d'infobulle au dessus des markers ! Mon problème se situe juste ici maintenant, plus d'infowindow sur les markers A, B, C etc.

Pour ce qui est du code, les points bleus, jaunes et rouges sont issus de ma bdd (en ajax via le fichier genxml.php et dans la fonction load()).
Les points de l'itinéraire (A B C etc.) sont issus de ma fonction itinéraire(). C'est pour ça qu'à la base je pensais qu'enlever ces infowindow pouvait être situé dans intineraire().

Bref, j'espère avoir été clair cette fois-ci :)

Mon 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
var customIcons = {
    Restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
    },
    Bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
    },
    Logement: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
    }
};
 
var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
 
function load() {//initialisation
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8, // zoom de la carte
        mapTypeId: 'roadmap' // type de la map : mode roadmap
    });
 
    //infoWindow 
    var infoWindowBdd = new google.maps.InfoWindow;
 
    //instanciation d'un service d'itinéraire
    directionsService = new google.maps.DirectionsService();
 
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
        map: map
    };
 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
 
    // downloadUrl génère le fichier xml
    downloadUrl("genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var description = markers[i].getAttribute("description");
            var img = markers[i].getAttribute("img");
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + name + "</b><br /><img src=" + img + "/><br /><b>Adresse postale : </b>" + address + ".<br /><b>Description : </b>" + description;// affichage des infobulles
            var icon = customIcons[type] || {};//customisation des markers
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
            });
            bindInfoWindow(marker, map, infoWindowBdd, html);//permet l'affichage des infobulles pour les markers de la bdd
        }
    });
}
 
//fct calcul de l'itinéraire en fct du départ, des étapes et de la destination
function itineraire() {
    var start = document.getElementById('start').value;//hidden start
    var end = document.getElementById('end').value;//hidden end
    wayPointArray = new Array();//création d'un tableau vide
    var waypoints1 = document.getElementById('waypoints1').value;//récupération de la lat et la lng des waypoints via hidden
    var waypoints2 = document.getElementById('waypoints2').value;
    var waypoints3 = document.getElementById('waypoints3').value;
    var waypoints4 = document.getElementById('waypoints4').value;
    var waypoints5 = document.getElementById('waypoints5').value;
    wayPointArray.push({location: waypoints1, stopover: true}, //push pour ajouter 1 waypoint dans le array et location pour indiquer sa lat et sa lng
    {location: waypoints2, stopover: false}, 
    {location: waypoints3, stopover: true},
    {location: waypoints4, stopover: true},
    {location: waypoints5, stopover: false});
 
    var request = {
        origin: start, //départ
        destination: end, //arrivée
        waypoints: wayPointArray, //tableau
        optimizeWaypoints: true, //optimisation de l'itinéraire en fonction du coût
        travelMode: google.maps.TravelMode.DRIVING, //mode voiture
        avoidHighways: true//pour éviter de prendre les autoroutes
    };
    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('warnings_panel');//résumé de l'itinéraire placé dans warnings_panel (cf page principale)
            summaryPanel.innerHTML = '';
            //Résumé entre chaque markers avec le départ, l'arrivée, la distance et la durée
            for (var i = 0; i < route.legs.length; i++) {
                summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
                summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br>';
                summaryPanel.innerHTML += '<b>Durée : ' + route.legs[i].duration.text + '</b><br><br>';
            }
        }
    });
}
 
//infobulle bdd
function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {//ou mouseover
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}
 
//fct de génération du fichier xml
function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
 
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
 
    request.open('GET', url, true);
    request.send(null);
}
 
//Appel des 2 fonctions (body onload)
function onload() {
    load();
    itineraire();
}
 
//fct doNothing pour fct downloadUrl
function doNothing() {
}

Merci.

27/10/2013, 17h29
nolookpass8

1 pièce(s) jointe(s)

Pièce jointe 129577

Enlever cette infobulle au-dessus de tous les markers générés par l'itinéraire, tous les points A,B,C (comme ex) ..
28/10/2013, 21h43
NoSmoking

Citation:

Ici on peut voir un marker bleu (un restaurant) et son infowindow, c'est ce que je veux.

comme dit plus haut, c'est dans la fonction load() que cela se joue via la fonction bindInfoWindow(marker, map, infoWindow, html);.

Citation:

Enlever cette infobulle au-dessus de tous les markers générés par l'itinéraire, tous les points A,B,C (comme ex) ..

comme dit plus haut il suffit de mettre l'option suppressInfoWindows du google.maps.DirectionsRenderer à true.