Why doesn't this Google Places API code work?

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) {


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?

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


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?

Do you see any errors showing in the browser’s console (Ctrl+Shft+J in Chrome)?

Also, I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


mebbe try …


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

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?

Can you provide a link to your current project, so we can see your current code as it stands now when you are getting the error message?

Alright, you can take a look here.

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

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

You need to make your request to the google api from a server script file (php, node, python, etc…) and not a web browser. Then, your webpage on the same server as the server script would make a request to this script to get the data.