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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<ul class="form">
<li><label>Départ :</label><input id="start" class="w100" name="start" type="text" /></li>
<div class="input_fields_wrap">
<div class="etape">Etape 1 : <input id="etape1" class="waypoints w70" name="waypoints[]" type="text" placeholder="Sous cette forme : ville, état" /> <button class="u-uppercase add_field_button btn btn-primary">Ajouter une étape</button></div>
</div>
<p><a name="resultat"></a></p>
<li><label>Arrivé :</label><input id="end" class="w100" name="end" type="text" /></li>
<li><input type="submit" id="submit" value="Calculer mon itinéraire" onclick="window.location.hash='resultat'"> ou bien <input type="button" onclick="return Confirm()" value="Réinitialiser tout" /></li>
</ul>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
<!-- Google Map V3 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=CLE_API&callback=initMap&libraries=places"></script>
<script>
// Google itineraire
function initMap() {
// Google places
google.maps.event.addDomListener(window, 'load', function () {
var origin = new google.maps.places.Autocomplete(document.getElementById('start'));
var destination = new google.maps.places.Autocomplete(document.getElementById('end'));
var etape1 = new google.maps.places.Autocomplete(document.getElementById('etape1'));
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 38.5209197668312, lng: -105.54345703125}
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementsByName("waypoints[]");
for (var i = 0; i < checkboxArray.length; i++) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
},
function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
else {
window.alert('Impossible de tracer l\'itinéraire. Cause : ' + status + '\n\nAvez vous mis au moins une étape ?\n\nAvez vous renseigné l\'état pour chaque étape (ex : Page, arizona ou Moab, utah) ?');
}
});
}
// Jquery
$(document).ready(function(){
// Ajouter input
var max_fields = 23; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="etape">Etape '+ x +' : <input class="waypoints w70" type="text" id="waypoints[]" name="waypoints[]" placeholder="Sous cette forme : ville, état" /> <a href="#" class="remove_field">Supprimer</a></div>'); //add input box
}
else {
alert("Pas plus de 25 étapes en comptant le départ et l'arrivé SVP...");
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent("div").remove(); x--;
})
});
</script>
</body>
</html> |
Partager