Google Maps – Direction

<!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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *