como dibujar una ruta entre dos marcadores en google maps

Si encuentras algún problema con tu código o proyecto, recuerda probar siempre en un entorno de testing antes aplicar el código al proyecto final.

Solución:

Dos comentarios:

1. su pregunta se refiere a las direcciones entre los marcadores, pero no hay marcadores en el código que publicó. Hay dos posiciones definidas por objetos LatLng. El servicio de indicaciones añadirá marcadores al inicio y al final de la ruta automáticamente. Si desea obtener indicaciones entre dos marcadores, primero deberá agregarlos a su mapa.
2. No hay una llamada a calcRoute en el código publicado (agregué un botón de “ruta” que hace que se ejecute).

Cuestiones:

1. el servicio de indicaciones devuelve ZERO_RESULTS para sus puntos originales, por lo que no se traza ninguna ruta. Agregue el manejo de errores en el caso else para el if (status == "OK") prueba para ver eso.
2. si cambio los puntos a un lugar que realmente se puede enrutar (Palo Alto, CA), la ruta del servicio de indicaciones no se representa porque nunca configuró la propiedad “mapa” del servicio de indicaciones

violín de trabajo

function mapLocation() 
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() 
        directionsDisplay = new google.maps.DirectionsRenderer();
        var chicago = new google.maps.LatLng(37.334818, -121.884886);
        var mapOptions = 
            zoom: 7,
            center: chicago
        ;
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
    

    function calcRoute() 
        var start = new google.maps.LatLng(37.334818, -121.884886);
        //var end = new google.maps.LatLng(38.334818, -181.884886);
        var end = new google.maps.LatLng(37.441883, -122.143019);
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(start);
        bounds.extend(end);
        map.fitBounds(bounds);
        var request = 
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
        ;
        directionsService.route(request, function (response, status) 
            if (status == google.maps.DirectionsStatus.OK) 
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
             else 
                alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
            
        );
    

    google.maps.event.addDomListener(window, 'load', initialize);

mapLocation();

fragmento de código de trabajo:

function mapLocation() 
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() 
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.334818, -121.884886);
    var mapOptions = 
      zoom: 7,
      center: chicago
    ;
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute);
  

  function calcRoute() 
    var start = new google.maps.LatLng(37.334818, -121.884886);
    //var end = new google.maps.LatLng(38.334818, -181.884886);
    var end = new google.maps.LatLng(37.441883, -122.143019);
    var request = 
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
    ;
    directionsService.route(request, function(response, status) 
      if (status == google.maps.DirectionsStatus.OK) 
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
       else 
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      
    );
  

  google.maps.event.addDomListener(window, 'load', initialize);

mapLocation();

html,
body,
#map-canvas 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

Bastantes errores. Primero está la geolocalización. ¡Tu segunda ubicación es incorrecta ya que la longitud solo puede ser de +180 a -180, por lo que -181 no existe en la tierra! En segundo lugar, como mencionó MrUpsidedown en el comentario, está llamando a una función dentro de una función. Primero corrija la geolocalización y luego las llamadas de su función, eso debería solucionar los problemas que está teniendo.

valoraciones y comentarios

Más adelante puedes encontrar los comentarios de otros usuarios, tú asimismo eres capaz dejar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador