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() {
} |
Partager