<!DOCTYPE html>
<html>
<head>
<title>Travel Modes in Directions</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
#map {
height: 500px;
width: 800px;
border-radius: 15px;
margin: 100px auto;
}
</style>
<script>
// inicia la Configuración
function initMap() {
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: { lat: 6.244338, lng: -75.573553 },
});
directionsRenderer.setMap(map);
calculateAndDisplayRoute(directionsService, directionsRenderer);
}
function calculateAndDisplayRoute(directionsService, directionsRenderer) {
directionsService.route(
{
origin: { lat: 6.244338, lng: -75.573553 },
destination: { lat: 6.153617, lng: -75.374169 },
// tambien se puede usar de otro modo WALKING - BICYCLING - TRANSIT
travelMode: google.maps.TravelMode["DRIVING"],
},
(response, status) => {
if (status == "OK") {
directionsRenderer.setDirections(response);
} else {
window.alert("Directions request failed due to " + status);
}
}
);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
API Key
https://console.developers.google.com/apis/credentials
