Google Maps API, error "No Access-Control-Allow-Origin"

Question

Google Maps API, error "No Access-Control-Allow-Origin"

Navigation

#1 by (1 votes)

1

I have a list of orders where each order has an address, what I want is for you to tell me the best order of delivery according to the direction of the orders. For that I use the Google Maps API that returns the positions in an array. But when I execute it, I get the error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' link ' 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++;
    }
}

javascript ajax google-maps

asked by Juan Manuel 13.01.2017 в 14:34

source

1 answer

Style of editText on Android with shadow similar to Google search how do I put an image of a folder in ireport java?

score 1 · Accepted Answer

You can not use ajax with this google maps API because it gives you the CORS problem. I solved it this way:

in the HTML I put: <script src="https://maps.googleapis.com/maps/api/js?key=LA_KEY"></script>

in 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");
        }
    });
}
}