Google's Places API and JQuery request - Origin http://localhost is not allowed by Access-Control-Allow-Origin

Question

I doing some testing for a project I got in mind which involves using places nearby. So I went with the big guy and started messing around with Google's Places Api. I'm using leaflet with openstreet tiles for my map. Now everything is fine until I try to use the dang thing.

var lat = coords.lat;
var lng = coords.lng;
var apiUrl = "https://maps.googleapis.com/maps/api/place/nearbysearch/json";
var data = {
    key: 'AIzaSyBl8bmE8kQT7RjoXhP6k2yDti44h9-fSUI',
    location: lat+','+lng,
    radius: '10000',
    sensor: 'false',
    rankby: 'prominence',
    types: 'bar|night_club'
};
$.ajax({
  url: apiUrl,
  type: 'POST',
  data: data,    
  dataType:"jsonp",
  crossDomain: true,
  success: function(data) {
            var obj = $.parseJSON(data);
                // console.log(data.next_page_token);
          }
});

Changing the dataType property to json I get Origin http://localhost is not allowed by Access-Control-Allow-Origin. Using jsonp I get a parsing error Unexpected token : Obviusly $.parseJSON does not work... Is there a way to make this work without having to use Google Maps Api? If the answer is no... Is there another places api as good as google's?

Thanks!

Answer 1

You're trying to use the Places API web service, which is meant for use from server code and does not support the JSONP output you'd need for JavaScript.

In JavaScript, you need to use the Places Library from the Maps API V3. You can't just hit a URL directly from JavaScript or jQuery code. (You could probably discover the URL pattern that the Places Library uses, but the terms of service don't allow direct use without going through the API/Library, and the URL could change at any time.)

Is there a reason you don't want to use the Maps API from JavaScript?