Google maps directions API

Question

Google maps directions API

Navigation

#1 by (0 votes)

2

My problem is that I'm using the google maps directions API and use axios to make the request, but when I execute the code it tells me that I'm not passing the origin parameter but if I'm passing it on, I'll try to pass it on the parameter from the beginning in the params object but nothing, I already use the url with https and only with http, I'm doing my tests in a localhost. in the end I will put the error that I get.

function directions(origen, destino){
  axios.get('http://maps.googleapis.com/maps/api/directions/json?',{
    params:{
      origin:origen,
      destination:destino,
      key:'mi clave ;)'
    }
  })
  .then(function(response){
    console.log(response)
  })
  .catch(function(error){
    console.log('Ha problemas willies');
  })
}

directions("ecatepec","CDMX")

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' link ' is therefore not allowed

javascript google-maps api

asked by ulysses316 17.03.2018 в 06:54

source

1 answer

create table with stored procedure Can an AlertDialog be customized with buttons and that these work as the default ones?

score 0 · Accepted Answer

Although it does not say so in the documentation (at least the last time I read it), that google endpoint apis is not intended for requests from the front, because of the cross origin problem. They simply do not have the response header Access-Control-Allow-Origin enabled and there is not much to do.

Your request is fine, if you charge directly link in your browser, it responds well.

But if you try to make a request from the front of your application, it will tell you

Failed to load https://maps.googleapis.com/maps/api/directions/json?&origin=ecatepec&destination=CDMX&key=AIzaSyDmlJky0d55y9q9i7XY9oyIvxJoYfUv5_I: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Solution? You have to make the request from the backend.