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!

Michael Geary · Accepted Answer · 2013-04-06 06:15:43Z

17

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?

answered Apr 6, 2013 at 6:15

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LouieV Over a year ago

Honestly, I want to make an app/service from my work and want to stay away from google as much as I can.

Michael Geary Over a year ago

That's reasonable enough, of course. What I was puzzled about was the idea of wanting to use the Places API web service directly from JavaScript without going through the Maps API to use it. You'd still be using Google services either way.

LouieV Over a year ago

Yeah I made my peace and started using the maps api.

LessQuesar Over a year ago

I know its an old topic, but with the trend of FE frameworks like angular, its easier to integrate the simple REST service. I was trying to use angular-resource but was seeing the same issue.

C4rr13rX · Accepted Answer · 2017-07-20 19:50:48Z

https://github.com/joshtronic/php-googleplaces

Just made this and uploaded it to one of my websites.

<?php
include 'GooglePlaces.php';
include 'GooglePlacesClient.php';
$google_places = new joshtronic\GooglePlaces('your_key');
$google_places->location = array(<your_lat>, <your_lon>);
$google_places->radius   = 800;
$results                 = $google_places->nearbySearch();
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *'); 
echo json_encode($results);

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related