Trouble with api request

#1

Hello everyone ! I was working on my local weather app when I stumbled upon a problem I can’t solve on my own :confused:

You see, i’m kind of used to api’s request, and it works perfectly fine when it comes to the FCC api on local weather, but when I tried to use the google’s geolocation api, I kept getting an error message.

here’s the URL to the api : http://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&sensor=true

And here’s how i’m approaching it :

function GetCity(){
$.ajax({
  datatype : "json",
  contentType : "application/json",
  type : "GET",
  url : "maps.googleapis.com/maps/api/geocode/json?",
  data : {
    latlng : "40.714224,-73.961452",
    sensor : "true";

  },
  success : function(quote){
    document.getElementById("city").innerHTML = "Success!"
  },
  error : document.getElementById("city").innerHTML = "Error!"
});
}

obviously i’ll use the returned json later on, but as for now I do not manage to get a success message, and since i’m a total noob with api’s , I thought i’d request help here.

If needed , here’s a link to the codepen : https://codepen.io/Hadrienallemon/pen/rpWgYG

Thanks a lot for anyone reading this, and have a good night !

#2

Here’s the thing: CodePen is securely hosted (https). When your web app is securely hosted, JavaScript is not able to fetch data from non-secure domains (http). This is a very good security measure that’s going to make your life with CodePen much more difficult than you expect. Check your dev console after your app has run and you’ll see some messages about blocked content. Even worse is that some APIs don’t work with browsers. Instead, they expect you to make calls to their API via a server that you set up as an intermediary. Again, this is for good reason. You may have guessed by now that Google’s location API is set up this way.

There really isn’t a “solution” to this since it’s not actually a problem - things are working exactly as they should. Plan on building your own server at some point to handle the API calls you want to make. What you can do in the meantime is use a CORS proxy like https://cors-anywhere.herokuapp.com/. Put this in front of the API you want to call and it will relay the data back to your app in browser.

var url = "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/geocode/json?"

One of the problems with this approach is that Google can block the proxy if they so choose. Another is privacy, since you’re relaying the user’s information through a third party. Users may have this URL blocked (for some reason). Keep in mind that your app could stop working at any time. All of this applies to the images you’re using as well. In general, the more you rely on other people’s services, the less robust your app will be.

I noticed some other problems caused by your JavaScript sources, too. Make sure you have jQuery listed before jQuery-UI. You also want to remove the call to Google’s API in there. It’s not doing you any good.

Looking good though. Keep it up.

#3

Wow I didn’t expect it to be so far-fetched :o Well I guess i’ll use another api. I’ll consider getting into building a server, but as for now i’m barely getting the hang on api, i’ll keep it in mind tough.

As for the Jquery problem, do you mean that I should import the Jquery library before calling the UI ? What does it change ? Thanks a lot anyway !

#4

The UI library depends on the based jQuery library, so it must load first. It may not effect anything in your project unless you are using something from the UI library specifically.

#5