Google Maps API V3: ¿Cómo mostrar la dirección desde un punto A hasta un punto B (línea azul)?

5 minutos de lectura

avatar de usuario
Jindle yugal

Tengo la latitud y la longitud de 2 puntos en la base de datos, quiero que mi mapa de Google muestre una ruta del punto A al punto B…

Justo como vemos aquí (Direcciones de Google Maps)

Imagen del enlace

¿Cómo dibujar esa línea de dirección en el mapa?

avatar de usuario
usuario2314737

Usando JavaScript

Creé una demostración de trabajo que muestra cómo usar el Servicio de indicaciones de la API de Google Maps en Javascript a través de un

  • DirectionsService objeto para enviar y recibir solicitudes de dirección
  • DirectionsRenderer objeto para representar la ruta devuelta en el mapa
function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

initMap();
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map-canvas {
      height: 100%;
      width: 100%;
    }
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map-canvas"></div>

También en Jsfiddle: http://jsfiddle.net/user2314737/u9no8te4/

Uso de los servicios web de Google Maps

Puede usar los servicios web usando una API_KEY emitiendo una solicitud como esta:

https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

Se puede obtener una API_KEY en Google Developer Console con una cuota de 2500 solicitudes gratuitas por día.

Una solicitud puede devolver resultados JSON o XML que se pueden usar para dibujar una ruta en un mapa.

La documentación oficial para los servicios web que utilizan la API de indicaciones de Google Maps son aquí

  • Oye, estoy usando este código y funciona bien, pero quiero agregar un marcador más A a C con una dirección diferente, estoy intentando muchas formas pero no funciona

    – Aniruddha Mishra

    27 de abril de 2016 a las 10:21

  • Soy bastante nuevo en la API de Google Maps, funciona para mí, pero ¿cómo puedo tener una distancia con la ruta?

    – Sarz

    28 de junio de 2016 a las 6:58

  • @Sarz echa un vistazo a esta otra demostración que hice jsfiddle.net/user2314737/fLogwsff

    – usuario2314737

    28 de junio de 2016 a las 7:31

  • @Tomik, ¿es posible que el código tome una instantánea de la imagen después de dibujar la línea?

    – CodeGuru

    5 de mayo de 2015 a las 7:46

  • Mire el segundo ejemplo: hay código 🙂

    – Nathan

    15 de junio de 2018 a las 1:33

avatar de usuario
Vahe Harutyunyan

En su caso, aquí hay una implementación usando servicio de direcciones.

function displayRoute() {

    var start = new google.maps.LatLng(28.694004, 77.110291);
    var end = new google.maps.LatLng(28.72082, 77.107241);

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.

    var request = {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

  • Para completar, agregue esto al código: var directionService = new google.maps.DirectionsService();

    – Aficionado

    24 de enero de 2015 a las 16:32


  • Gracias @Dabbler, he editado, no dudes en editar si ves errores en las respuestas.

    – Vahe Harutyunyan

    26 de enero de 2015 a las 8:37


  • ¿Es posible que el código tome una instantánea de la imagen después de dibujar la línea?

    – CodeGuru

    5 de mayo de 2015 a las 7:46

  • No estoy seguro de si el “servicio de indicaciones” proporciona o no ese tipo de funcionalidad ((

    – Vahe Harutyunyan

    5 de mayo de 2015 a las 12:16

  • ¡buena respuesta! Sin embargo, varios clics para obtener puntos del producto B de las direcciones por cada clic. ¿Cómo se restablecen la ruta/los marcadores? 🙂

    – TreyBake

    7 de enero de 2020 a las 16:43

avatar de usuario
Tomás Valadez

  // First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID'
  var map = new google.maps.Map(
    document.getElementById('MyMapID'),
    {
      center: {
        lat: Some.latitude,
        lng: Some.longitude
      }
    }
  );
  // Create a new directionsService object.
  var directionsService = new google.maps.DirectionsService;
    directionsService.route({
      origin: origin.latitude +','+ origin.longitude,
      destination: destination.latitude +','+ destination.longitude,
      travelMode: 'DRIVING',
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer({
          suppressMarkers: true,
          map: map,
          directions: response,
          draggable: false,
          suppressPolylines: true, 
          // IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
          // AUTOMATICALLY DRAWN FOR YOU.
        });

        // IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A 
        // `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A 
        // LIST
        pathPoints = response.routes[0].overview_path.map(function (location) {
          return {lat: location.lat(), lng: location.lng()};
        });

        var assumedPath = new google.maps.Polyline({
         path: pathPoints, //APPLY LIST TO PATH
         geodesic: true,
         strokeColor: '#708090',
         strokeOpacity: 0.7,
         strokeWeight: 2.5
       });

       assumedPath.setMap(map); // Set the path object to the map

  • Para completar, agregue esto al código: var directionService = new google.maps.DirectionsService();

    – Aficionado

    24 de enero de 2015 a las 16:32


  • Gracias @Dabbler, he editado, no dudes en editar si ves errores en las respuestas.

    – Vahe Harutyunyan

    26 de enero de 2015 a las 8:37


  • ¿Es posible que el código tome una instantánea de la imagen después de dibujar la línea?

    – CodeGuru

    5 de mayo de 2015 a las 7:46

  • No estoy seguro de si el “servicio de indicaciones” proporciona o no ese tipo de funcionalidad ((

    – Vahe Harutyunyan

    5 de mayo de 2015 a las 12:16

  • ¡buena respuesta! Sin embargo, varios clics para obtener puntos del producto B de las direcciones por cada clic. ¿Cómo se restablecen la ruta/los marcadores? 🙂

    – TreyBake

    7 de enero de 2020 a las 16:43

avatar de usuario
Argiropoulos Stavros

Utilizar el API de direcciones.

Haz una llamada ajax, es decir

https://maps.googleapis.com/maps/api/directions/json?parameters

y luego analizar la respuesta

  • ¿Es posible que el código tome una instantánea de la imagen después de dibujar la línea?

    – CodeGuru

    5 de mayo de 2015 a las 7:46

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad