Created
December 10, 2019 18:52
-
-
Save crstn/32a3b8a348ec1f60e8d65c5c456f48c2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var map; // 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 directionsRenderer = new google.maps.DirectionsRenderer(); | |
var directionsService = new google.maps.DirectionsService(); | |
map = new google.maps.Map(document.getElementById("map"), { | |
zoom: 1, | |
center: { lat: 122.15674, lng: 10.21076 } | |
}); | |
directionsRenderer.setMap(map); | |
document | |
.getElementById("directionsForm") | |
.addEventListener("submit", function(e) { | |
e.preventDefault(); | |
calculateAndDisplayRoute(directionsService, directionsRenderer); | |
}); | |
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) { | |
var mode = document.getElementById("mode").value; | |
var start = document.getElementById("ac1").value; | |
var end = document.getElementById("ac2").value; | |
directionsService.route( | |
{ | |
origin: start, | |
destination: end, | |
travelMode: google.maps.TravelMode[mode] | |
}, | |
function(response, status) { | |
if (status == "OK") { | |
// start | |
console.log(response.routes[0].overview_path[0].lat()); | |
console.log(response.routes[0].overview_path[0].lng()); | |
url = | |
"/test?lat=" + | |
response.routes[0].overview_path[0].lat() + | |
"&lng=" + | |
response.routes[0].overview_path[0].lng(); | |
console.log(url); | |
// turns ot we don't even need jQuery's ajax function | |
map.data.loadGeoJson(url); | |
// end | |
route_length = response.routes[0].overview_path.length; | |
console.log(response.routes[0].overview_path[route_length - 1].lat()); | |
console.log(response.routes[0].overview_path[route_length - 1].lng()); | |
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