Autor Tema: [CODE] Tiempo y distancia entre dos lugares usando google maps api  (Leído 254 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado graphixx

  • Whitehat
  • Administrador
  • Usuario Héroe
  • *****
  • Mensajes: 1633
  • Karma: +1984/-0
  • Whitehat
    • Ver Perfil
    • Sistemas y Controles
Busque durante horas en Internet ejemplos de como calcular la distancia entre dos lugares, había muchos ejemplos pero ninguno con los campos de autocompletar que vayan sugiriendo los lugares, y mucho menos encima del mapa en vivo, mucho menos que trazaran la ruta y la mostraran, y al final arme este ejemplo que les estoy compartiendo de varios trozos de varios ejemplos mas la documentación oficial, espero les sea de mucha ayuda en sus desarrollos.





Código: [Seleccionar]
<!DOCTYPE html>
<html>
  <head>
    <title>Distancia entre dos puntos</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 425px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #origin-input,
      #destination-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 200px;
      }

      #origin-input:focus,
      #destination-input:focus {
        border-color: #4d90fe;
      }

      #mode-selector {
        color: #fff;
        background-color: #4d90fe;
        margin-left: 12px;
        padding: 5px 11px 0px 11px;
      }

      #mode-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
  </head>
  <body>
    <div style="display: none">
        <input id="origin-input" class="controls" type="text"
            placeholder="Ingrese dirección recogida">

        <input id="destination-input" class="controls" type="text"
            placeholder="Ingrese dirección entrega">

        <div id="mode-selector" class="controls">
          <input type="radio" name="type" id="changemode-walking" checked="checked">
          <label for="changemode-walking">Caminando</label>

          <input type="radio" name="type" id="changemode-transit">
          <label for="changemode-transit">tránsito</label>

          <input type="radio" name="type" id="changemode-driving">
          <label for="changemode-driving">Conducir</label>
        </div>
    </div>

    <div id="map"></div>
    <div id="duration">Duración: </div>
   <div id="distance">Distancia: </div>
    <script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script
// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    center: {lat: 6.244338, lng: -75.573553},
    zoom: 13
  });

  new AutocompleteDirectionsHandler(map);
}

/**
 * @constructor
 */
function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.travelMode = 'WALKING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsDisplay = new google.maps.DirectionsRenderer;
  this.directionsDisplay.setMap(map);

  var originInput = document.getElementById('origin-input');
  var destinationInput = document.getElementById('destination-input');
  var modeSelector = document.getElementById('mode-selector');

  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);

  this.setupClickListener('changemode-walking', 'WALKING');
  this.setupClickListener('changemode-transit', 'TRANSIT');
  this.setupClickListener('changemode-driving', 'DRIVING');

  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(
      destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
}

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
AutocompleteDirectionsHandler.prototype.setupClickListener = function(
    id, mode) {
  var radioButton = document.getElementById(id);
  var me = this;

  radioButton.addEventListener('click', function() {
    me.travelMode = mode;
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
    autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);

  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else {
      me.destinationPlaceId = place.place_id;
    }
    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId) {
    return;
  }
  var me = this;

  this.directionsService.route(
      {
        origin: {'placeId': this.originPlaceId},
        destination: {'placeId': this.destinationPlaceId},
        travelMode: this.travelMode
      },
      function(response, status) {
        if (status === 'OK') {
          me.directionsDisplay.setDirections(response);

         // Display the distance:
         document.getElementById('distance').innerHTML +=
            response.routes[0].legs[0].distance.value + " metros";

         // Display the duration:
         document.getElementById('duration').innerHTML +=
            response.routes[0].legs[0].duration.value + " segundos";

        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
};
</script>
    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXX&libraries=places&callback=initMap"
        async defer></script>
  </body>
</html>

PD: no hace falta decir que para que el código funcione necesitas ir a la consola de developers de google maps y generar una llave api de javascript api de google maps y colocarla donde yo deje las key=XXXXXXXXX al final del código.

Ya para usar esos valores en tu app si te dejo el resto de carpintería, se me ocurre que los envíes a un php usando AJAX donde esta la parte de:
Código: [Seleccionar]
         // Display the distance:
         document.getElementById('distance').innerHTML +=
            response.routes[0].legs[0].distance.value + " metros";
O los captures cada que se dibujen en la pagina cambiando los divs por inputs y mediante una función javascript en el evento onchange.

Recuerda seguir mi pagina en facebook para mas ejemplos de código geniales que se publican cada semana: https://www.facebook.com/sistemasycontroles/
« Última Modificación: 20 de marzo de 2019, 07:23:58 am por graphixx »
Para tus servicios y comprar productos de Sistemas piensa en contratarnos, usa los botones de WhatsApp ubicados en nuestra pagina principal: www.sistemasycontroles.net

Información Personal sobre Graphixx: