Why doesn't this Google Places API code work?

JavaScript
1

The FCC weather API works just fine, but this Google Places API doesn’t work and I can’t figure out why.

$(document).ready(function() {

  navigator.geolocation.getCurrentPosition(function(location) {

    //declare location variables
    var lon = location.coords.longitude;
    var lat = location.coords.latitude;

    //API Keys
    var gApiKey = [privatekey];

    //enter google places awareness API
    var googPlaceAPI = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location="+lat+","+lon+"&radius=200&key="+gApiKey;


    // console.log(googPlaceAPI);

    $.getJSON(googPlaceAPI, function(jsonPlace) {
      $("#test").html("jsonPlace");
    });

  });
});

If I console log the constructed API url and paste it into a browser, it gives me the json data like I’d expect, but I can’t get it to do anything at all in the actual code.

What am I doing wrong?

2

mebbe try adding this to the end of the url…?

&format=json&callback=?

3

Unfortunately, that did not have any effect. If I paste the constructed url into a browser, it still gives me the json data as expected though.

I don’t understand what’s wrong with the code. Any other ideas?

5

mebbe try …

 $("#test").append("jsonPlace");

it’s hard for us to debug without being able to use the api key thing
or see a codepen or jsfiddle of it…heh

6

I am seeing this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

According to this post here, it looks like Google API’s might not work with codepen:

Buy, I’m also kind of in over my head here and unsure how to parse the meaning of all of this.

All I really wanted to do was make one of the front-end development projects a little fancier, and a little harder. But it looks like I might be beyond my depth here.

Can you confirm or correct my suspicions here?

8

Alright, you can take a look here.
https://codepen.io/plymouthvan/pen/vRrKjz

9

Its your $("#test").html("jsonPlace"); you are using jsonPlace as a string not a var

10

So, that’s actually intentional. I had changed it just to see if the function would put anything on the page at all. :confused: