Skip to content

Instantly share code, notes, and snippets.

@crstn
Created December 11, 2019 15:12
Show Gist options
  • Save crstn/cfbdc6f3fdd60bdfd5eb01d43247ad1e to your computer and use it in GitHub Desktop.
Save crstn/cfbdc6f3fdd60bdfd5eb01d43247ad1e to your computer and use it in GitHub Desktop.
var map, directionsrenderer1, directionsrenderer2, directionsRenderer3; // introduce the map variable first, otherwise it only shows up inside the initialize() function and is unknown outside of it.
// funcion that creates the map
function initialize() {
// this code here are the functions that make the directions api work
var directionsRenderer1 = new google.maps.DirectionsRenderer();
var directionsRenderer2 = new google.maps.DirectionsRenderer();
var directionsRenderer3 = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: {
lat: 56.15674,
lng: 10.21076
}
});
directionsRenderer1.setMap(map);
document
.getElementById("directionsForm")
.addEventListener("submit", function(e) {
e.preventDefault();
calculateAndDisplayRoute(directionsService, directionsRenderer1, "ac1", "ac4"); // pass the IDs of the elements with start and end points as parameters!
});
directionsRenderer2.setMap(map);
document
.getElementById("directionsForm")
.addEventListener("submit", function(e) {
e.preventDefault();
calculateAndDisplayRoute(directionsService, directionsRenderer2, "ac2", "ac4");
});
directionsRenderer3.setMap(map);
document
.getElementById("directionsForm")
.addEventListener("submit", function(e) {
e.preventDefault();
calculateAndDisplayRoute(directionsService, directionsRenderer3, "ac3", "ac4");
});
var options = {
componentRestrictions: {
country: "dk"
}
};
var acInputs = document.getElementsByClassName("autocomplete");
for (var i = 0; i < acInputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(
acInputs[i],
options
);
autocomplete.inputId = acInputs[i].id;
}
}
function calculateAndDisplayRoute(directionsService, directionsRenderer, startID, endID) { // additional parameters!
var mode = document.getElementById("mode").value;
var start = document.getElementById(startID).value; // use them here!
var end = document.getElementById(endID).value;
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode[mode]
},
function(response, status) {
if (status == "OK") {
route_length = response.routes[0].overview_path.length;
urlorigin =
"/origin?lat=" +
response.routes[0].overview_path[0].lat() +
"&lng=" +
response.routes[0].overview_path[0].lng();
urldestination =
"/origin?lat=" +
response.routes[0].overview_path[route_length - 1].lat() +
"&lng=" +
response.routes[0].overview_path[route_length - 1].lng();
console.log(urlorigin);
console.log(urldestination);
// turns ot we DO need jQuery's ajax function
$.ajax({
url: urlorigin,
}).done(function(data) {
map.data.addGeoJson(data);
// Do more with the data here to fill in the boxes at the bottom
// when the first query is complete and processed,
// head on to the second one. Thay way you can have just one
// app route in the server.py:
}).then(function(){
// same thing as before, but for the destination
$.ajax({
url: urldestination,
}).done(function(data) {
map.data.addGeoJson(data);
// Do more with the data here to fill in the boxes at the bottom
});
});
directionsRenderer.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment