1

Tengo un listado de pedidos donde cada pedido tiene una dirección, yo lo que quiero es que me diga el mejor orden de entrega según la dirección de los pedidos. Para eso utilizo la API de Google Maps que devuelve en un array las posiciones. Pero al ejecutarlo me tira el error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8084' is therefore not allowed access.

listaPedidos.js

$(document).load(obtenerUbicacion());

var posActualLat = 0;
var posActualLng = 0;

var waypoints = [];
var cont = 0;

// OBTENER LA POSICIÓN DEL REPARTIDOR.
function obtenerUbicacion(){

    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(function(objPosition)
        {   
            posActualLat = objPosition.coords.latitude;
            posActualLng = objPosition.coords.longitude;

            ordenLista();
        }, function(objPositionError)
        {
            switch (objPositionError.code)
            {
                case objPositionError.PERMISSION_DENIED:
                    alert("No se ha permitido el acceso a la posición del usuario.");
                break;
                case objPositionError.POSITION_UNAVAILABLE:
                    alert("No se ha podido acceder a la información de su posición.");
                break;
                case objPositionError.TIMEOUT:
                    alert("El servicio ha tardado demasiado tiempo en responder.");
                break;
                default:
                    alert("Error desconocido.");
            }
        }, {
                maximumAge: 75000,
                timeout: 15000
        });
    }
    else
    {
        alert("Su navegador no soporta la geolocalización.");
    }
}

// Funcion transformadora
function translateWaypoints(waypoints, optimizar) {
    var params = [];
    if (optimizar === true) {
        params.push('optimize:true');
    }
    $.each(waypoints, function(idx, waypoint){
        params.push(waypoint.dir);
    });
    return params.join('|');
}

function ordenLista(){

    if (waypoints.length === 0){
        var div = document.getElementById("listado");
        div.innerHTML = "<h2 class='noHay'>No tienes pedidos asignados</h2>";
    }
    else{
        $.ajax({
            url:"https://maps.googleapis.com/maps/api/directions/json",
            dataType:"json",
            data:{
                key:'MI_KEY',
                origin: posActualLat + ',' + posActualLng,
                destination: -34.911946 + ',' + -56.160502,
                waypoints:translateWaypoints(waypoints, true),
                callback:"?"
            },
            success: armarListado
        });
    }
}

function armarListado(info){
    var orden = info.routes[0].waypoint_order;

    var div = document.getElementById("listado");
    var i = 0;
    var temp = "";
    while(i < waypoints.length){    
        temp += "<div id='"+waypoints[orden[i]].id+"' class='listaPedidos'>";
        temp += "<a href='DetallesServlet?id="+waypoints[orden[i]].id+"'>";
        temp += "<p>#"+waypoints[orden[i]].id+"</p>";
        temp += "<p>"+waypoints[orden[i]].desc+"</p>";
        temp += "<p>"+waypoints[orden[i]].dir+"</p>";
        temp += "<p>"+waypoints[orden[i]].coment+"</p>";
        temp += "</a></div>";

        div.innerHTML = temp;
        i++;
    }
}
8
  • Revisa esta respuesta. Commented el 13 ene. 2017 a las 14:05
  • 2
    Te recomiendo leer ésta guía de Google.
    – gugadev
    Commented el 13 ene. 2017 a las 14:07
  • @Mauricio ya puse "jsonp" y me tira error: Uncaught SyntaxError. Commented el 13 ene. 2017 a las 15:03
  • @guzgarcia estoy intentando hacerlo como dice ahí, pero no se como ver lo que me retorna, por ejemplo en el código que yo puse tengo success: armarListado y ahi llamo a la función que arma todo con lo que me retorna. Commented el 13 ene. 2017 a las 15:03
  • ¿A qué te refieres con "no se como ver lo que me retorna"?
    – gugadev
    Commented el 13 ene. 2017 a las 15:13

1 respuesta 1

1

No se puede usar ajax con esta API de google maps porque te da el problema de CORS. Lo resolví de este modo:

en el HTML puse: <script src="https://maps.googleapis.com/maps/api/js?key=LA_KEY"></script>

en el javascript:

function ordenLista(){

if (waypoints.length === 0){
    var div = document.getElementById("listado");
    div.innerHTML = "<h2 class='noHay'>No tienes pedidos asignados</h2>";
}
else{
    translateWaypoints();
    var directionsService = new google.maps.DirectionsService();
    directionsService.route({
        origin: posActualLat + ',' + posActualLng,
        destination: -34.377281 + ',' + -55.237778,
        waypoints: params,
        optimizeWaypoints: true,
        travelMode: "DRIVING"
    },
    function (response, status) {
        if (status === google.maps.DirectionsStatus.OK){
            armarListado(response);
        }
        else{
            alert("Error al mostrar los pedidos");
        }
    });
}
}
1
  • 2
    Por eso te dije que sigas la guía. Las APIs de Google te requieren autenticación. Cuando te creas un proyecto en el panel de Google, te da una llave y, además, puedes agregar los hosts a los cuales se les permitirá consultar.
    – gugadev
    Commented el 14 ene. 2017 a las 16:14

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.