1

Estoy trabajando un poco con el directions service que ofrece la API de Google Maps, sin embargo me di cuenta que al utilizar setDirections y agregar 2 o mas direcciones al mapa se desordenan. Es decir, en el mapa se muestran correctamente pero si yo muestro en consola el objeto response que es el resultado de renderizar las direcciones aparecen desordenadas.

¿Alguien sabe porque sucede esto?¿Se pueden ordenar de alguna manera?

Y esto sucede sin waypoints, lo cual estoy utilizando. En verdad los necesito ordenados para una animacion que estoy haciendo.

EDIT: Si se fijan en consola verán que el recorrido empieza en times square, ny (start_address) y como end_address tiene central park, ny. Este objeto deberia salir de primero en consola, pero en la mayoria de los casos no lo hace.

Adjunto StackSnnipet para mayor entendimiento.

var map;
  var directionDisplay;
  var directionsService;
  var stepDisplay;
 
  var position;
  var marker = [];
  var polyline = [];
  var poly2 = [];
  var poly = null;
  var startLocation = [];
  var endLocation = [];
  var timerHandle = [];
  var currentDistance = [];

  
  var startLoc = new Array();
  startLoc[0] = 'times square, ny';
  startLoc[1] = 'central park, ny';
  startLoc[2] = 'rockefeller center, ny';
  startLoc[3] = 'empire state building, ny';

  var endLoc = new Array();
  endLoc[0] = 'central park, ny';
  endLoc[1] = 'rockefeller center, ny';
  endLoc[2] = 'empire state building, ny';
  endLoc[3] = 'chinatown, ny';


  var Colors = ["#FF0000", "#00FF00", "#0000FF"];


function initialize() {  

  infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });

    var myOptions = {
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    address = 'manhattan, ny'
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
     map.fitBounds(results[0].geometry.viewport);

    }); 

  } 

function setRoutes(){   

    var directionsDisplay = new Array();

    for (var i=0; i< startLoc.length; i++){

    var rendererOptions = {
        map: map,
        preserveViewport: true
    }
    directionsService = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  
    //Instancia del callback para mostrarlo, pero ya tiene las direcciones desordenadas 
    directionsService.route(request,makeRouteCallback(i,directionsDisplay[i]));

    }   
//A partir de aqui se desordena
    function makeRouteCallback(routeNum,disp){
        
        return function(response, status){
          
          if (status == google.maps.DirectionsStatus.OK){

            disp = new google.maps.DirectionsRenderer(rendererOptions);     
            disp.setMap(map);
            disp.setDirections(response);
            
            // Este es el arreglo que me gustaria ordenar
            var legs = response.routes[0].legs;

            console.log(legs);
        }

    }

  }

}
html{height:100%;}
body{height:100%;margin:0px;font-family: Helvetica,Arial;}
<body onload="initialize()">

<div id="tools">

<button onclick="setRoutes();">Mostrar Rutas</button>

</div>

<div id="map_canvas" style="width:100%;height:100%;"></div>

</body>

2
  • 1
    Nunca compartas las llaves de tu API, porían ser utilizadas por otras personas.
    – FranAcuna
    el 20 ene. 2021 a las 21:02
  • No te preocupes amigo, es la que pone Google de prueba.en la documentación. el 20 ene. 2021 a las 21:57

1 respuesta 1

0

Si alguien tiene el mismo problema que yo con tramos de direcciones desordenados al usar DirectionsServices, chequen este github.

Es una solucion bastante elegante, en donde ordena el objeto directionsResults uno por uno. Me ayudo mucho a implementar la animacion que buscaba.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.