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
138
139
140
| function load_jour(id_product, jour_nombre, start, end) {
//mapOptions
var mapOptions_jour = {
zoom: 20,
mapTypeControlOptions: {
mapTypeControl: true
}
};
var map_jour = new google.maps.Map(document.getElementById('map_jour'),
mapOptions_jour);
//instanciation d'un service d'itinéraire
var directionsService_jour = new google.maps.DirectionsService();
//options d'affichage de l'itinéraire
var rendererOptions_jour = {
map: map_jour,
suppressMarkers: true//supprimmer les markers de l'itinéraire (Point A,B,C etc.)
};
var directionsDisplay_jour = new google.maps.DirectionsRenderer(rendererOptions_jour);
//modifier la couleur bleu de l'itinéraire
var polyOptions_jour = {
//strokeColor: '#009FE3', //cyan
strokeColor: '#0bb14d', //vert
strokeOpacity: 0.70, //opacité du trait
strokeWeight: 5//largeur du trait
};
directionsDisplay_jour.setOptions({
polylineOptions: polyOptions_jour
}); //modifier la couleur bleu de l'itinéraire
// downloadUrl génère le fichier xml
downloadUrl("index.php?controller=generer-xml-circuit", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("activite");
/************************************ DEBUT MARKERS *********************************/
/*var lastPosition = document.getElementById('lastPosition').value;
var firstPosition = document.getElementById('firstPosition').value;*/
for (var i = 0; i < markers.length; i++) {//i = 0 et i < length pour avoir tous les markers
if (markers[i].getAttribute("id_product") === id_product && markers[i].getAttribute("jour") === jour_nombre) {//si id_product du genxml == hidden du controller --> pour avoir uniquement les infos du circuit demandé et du JOUR
var idTa = markers[i].getAttribute("idTa");
var idAct = markers[i].getAttribute("idAct");
var nameActivite = markers[i].getAttribute("nameActivite");
var adressePostale = markers[i].getAttribute("adresse") + "<br />" + markers[i].getAttribute("cp") + " " + markers[i].getAttribute("ville") + " " + markers[i].getAttribute("nameCountry");
/*var position = markers[i].getAttribute("position");
var nameTypeactivite = markers[i].getAttribute("nameTypeactivite");*/
var descriptionActivite = markers[i].getAttribute("descriptionActivite");
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(latitude, longitude);
var myMarkerImage_jour = new google.maps.MarkerImage('img/ta/' + idTa + '.jpg');
/*if (position === firstPosition || position === lastPosition) {
var title = nameTypeactivite;
} else {
title = "Etape " + position;
}*/
var marker_jour = new google.maps.Marker({
position: point,
map: map_jour,
cursor: 'default',
//title: title,
icon: myMarkerImage_jour,
animation: google.maps.Animation.DROP
});
//personnaliser une infoWindow avec la librairie InfoBubble
var infoWindowBdd_jour = new InfoBubble({
map: map_jour,
shadowStyle: 0, // Style de l'ombre de l'infobulle (0, 1 ou 2)
padding: 10, // Marge interne de l'infobulle (en px)
content: "<div style='line-height: normal ! important;'><p style='display:block;text-align:justify;color:#666666;'><b style='font-size:16px;'>" + nameActivite + "</b><br /><img style='width:60px;height:60px;' src='../~voyagere/img/act/" + idAct + ".jpg'/><br /><br /><b>Adresse postale :</b><br />" + adressePostale + "<br /><br /><b>Description :</b> " + descriptionActivite + "</p></div>",
backgroundColor: '#FFFFFF', // Couleur de fond de l'infobulle
borderRadius: 0, // Angle d'arrondis de la bordure
arrowSize: 12, // Taille du pointeur sous l'infobulle
borderWidth: 0, // Épaisseur de la bordure (en px)
//borderColor: '#666666', // Couleur de la bordure
disableAutoPan: false, // Désactiver l'adaptation automatique de l'infobulle
hideCloseButton: true, // Cacher le bouton 'Fermer'
arrowPosition: 50, // Position du pointeur de l'infobulle (en %)
arrowStyle: 0, // Type de pointeur (0, 1 ou 2)
disableAnimation: false, // Désactiver l'animation à l'ouverture de l'infobulle
maxWidth: 400
});
bindInfoWindow(marker_jour, map_jour, infoWindowBdd_jour); //permet l'affichage des infobulles pour les markers de la bdd
}
}
/********************************************** FIN MARKERS ***************************************************/
/********************************************** DEBUT ITINERAIRE *************************************************/
var wayPointArray = new Array(); //création d'un tableau vide
for (var i = 1; i < (markers.length - 1); i++) {//on a besoin d'avoir que les coordonnées des étapes donc on commence à 1 et on finit à - 1
if (markers[i].getAttribute("id_product") === id_product && markers[i].getAttribute("jour") === jour_nombre) {//si id_product du genxml == hidden du controller --> pour avoir uniquement les infos du circuit demandé
var latitude = parseFloat(markers[i].getAttribute("lat")).toFixed(3);
var longitude = parseFloat(markers[i].getAttribute("lng")).toFixed(3);
var point = new google.maps.LatLng(latitude, longitude);
wayPointArray.push({//tous les points sont ajoutés à wayPointArray
location: point, //coord gps
stopover: true//true --> passage par ce point dans le calcul de l'itinéraire
});
}
}
var request = {
origin: start, //départ
destination: end, //arrivée
waypoints: wayPointArray, //tableau
travelMode: google.maps.TravelMode.DRIVING //mode voiture
};
directionsService_jour.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay_jour.setDirections(response);
}
//CI-DESSOUS LES ERREURS POSSIBLES SI L'ITINERAIRE NE S'AFFICHE PAS
if (status === google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED) {//google maps limite à 8 le nombre de markers pour un itinéraire
alert("Trop de DirectionsWaypoints ont été fournis dans DirectionsRequest. Le nombre maximum d'étapes autorisées est de 8, en plus de l'origine et de la destination. Les utilisateurs de l'API Google Maps pour les entreprises ont droit jusqu'a 23 étapes, en plus de l'origine et de la destination. Les étapes ne sont pas supportées pour les calculs d'itinéraires via les transports en commun."); //msg d'erreur
window.location.href = "javascript:history.back()"; //redirection page précédente
}
if (status === google.maps.DirectionsStatus.ZERO_RESULTS) {
alert("Aucun itinéraire n'a pu être trouvé entre le point de départ et l'arrivée.");
window.location.href = "javascript:history.back()";
}
if (status === google.maps.DirectionsStatus.INVALID_REQUEST) {
alert("Le DirectionsRequest fourni n'était pas valide. Les causes les plus fréquentes, liées à ce code d'erreur, sont des requêtes incomplètes, soit l'origine ou soit la destination, ou une requête de transport en commun comportant des étapes.");
window.location.href = "javascript:history.back()";
}
if (status === google.maps.DirectionsStatus.NOT_FOUND) {
alert("L'un des emplacements au moins (départ, origine ou étape) n'a pas pu être géocodé.");
window.location.href = "javascript:history.back()";
}
if (status === google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
alert("La page Web a émis trop de reqûetes dans les délais autorisés.");
window.location.href = "javascript:history.back()";
}
if (status === google.maps.DirectionsStatus.UNKNOWN_ERROR) {
alert("La requête relative au calcul d'itinéraire n'a pas pu être traitée en raison d'une erreur serveur. La requête peut aboutir si vous essayez de nouveau.");
window.location.href = "javascript:history.back()";
}
if (status === google.maps.DirectionsStatus.REQUEST_DENIED) {
alert("La page Web n'est pas autorisée à utiliser le service de calcul d'itinéraires.");
window.location.href = "javascript:history.back()";
}
});
/*********************************************** FIN ITINERAIRE ***********************************************/
});
} |
