Querying Google Places API using jQuery

Question

Google Places API is now generally available. I am trying to use the .ajax() call in jQuery to make a call to Google Places. The error I keep getting back is Uncaught SyntaxError: Unexpected token :

I am using jQuery 1.5.2. I tried on 1.5.1 too, but that had the same results. I'd rather not move to 1.6.1 if I can help it.

I've made ajax calls like this to other APIs just since, but am having trouble with Google Places. Below is a very basic sample of code you can play with. You'll need to go get your own key at the API Console Google offers (https://code.google.com/apis/console)

jQuery.noConflict();
 jQuery(document).ready(function(){

  var url = 'https://maps.googleapis.com/maps/api/place/search/json';

  jQuery.ajax({
   url: url,
   dataType: 'jsonp',
   type: 'GET',
   data:  {
     location: '33.787794,-117.853111',
     radius: 1000,
     name: 'coffee',
     key: 'your_key', // add your key here
     sensor: 'false'
     },

   // on success
   success: function(data, textStatus, jqXHR){

      console.log(data);


   },

   // on failure
   error: function (jqXHR, textStatus, errorThrown){
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
   }
   });
 });

no.good.at.coding · Accepted Answer · 2011-05-23T23:56:13.707

5

From what I can see from the documentation, the Google Places Web Service API does not support JSONP - only JSON. The error you're seeing is because the response is simply JSON but is being parsed as if it was JSONP and that causes an error.

Check out the Google Maps JavaScript API - it includes a Places library that you might be able to use - see google.maps.places.PlacesServices#search().

AFAIK, there seems to be shift towards removing JSONP support - for example, the Geocoding API used to support JSONP (undocumented) in v2 but no longer in v3. Someone suggested it might be in order to encourage developers to use the JavaScript API instead.

edited May 23 '11 at 23:56

answered May 23 '11 at 23:50

no.good.at.coding

20,221
2
60
51

The Google Maps API Terms of Service require that the API (including the various web services such as Geocoding and Places) be used "in conjunction with a Google map". This means that when using the services in a web page (which is where JSONP is useful) you will need to load the API anyway in order to display a map, so there is no reason not to use the relevant API classes to access these services. In many cases this is easier anyway, as you don't have to construct or URL encode URLs, and the results are converted into the relevant Maps API objects (eg. google.maps.LatLng) for you. – Thor Mitchell May 24 '11 at 01:07
@Thor, I don't think that's true anymore since they released is publicly. The docs now state... "If your application displays Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data." – hemmeter May 25 '11 at 17:49
1

Given what I said above about not needing a Map, how could one call the web service from JavaScript given the cross-domain issues? Only server-side calls? – hemmeter May 25 '11 at 17:50
1

@hemmeter Yeah, unfortuately (AFAIK) the only options for cross-domain requests are JSONP, using a proxy or access to the server code to use HTTP allow headers. In this case, only the proxy option remains. – no.good.at.coding May 26 '11 at 01:05
The Terms of the Google Places API state "You must not use or display the Content without a corresponding Google map, unless you are explicitly permitted to do so in the Maps APIs Documentation, or through written permission from Google. Given that the web services are intended to serve mobile apps, which are constrained in their screen real estate, the "corresponding Google map" does not need to always be shown alongside the Places API results. It can, for example, be on a different tab, as long as the "Powered by Google" logo is shown where Places API results are displayed with no map. – Thor Mitchell Jul 11 '11 at 07:02

Rafael Xavier · Answer 2 · 2011-11-15T14:16:23.520

The below isn't a direct solution. But, that's how I got it working...

Since JSONP isn't supported (and I didn't understand how client-code is supposed to use that API anyway), the solution is to proxy it thru your server... If you use rails on your server-side, the below may work for you:

class PlacesController < ApplicationController
    def autocomplete
        # Using Google Web Services
        # https://code.google.com/apis/console
        url = "https://maps.googleapis.com/maps/api/place/autocomplete/json"
        _params = {
            :key => "<<< YOUR KEY >>>",
            :types => "geocode",
            :sensor => (params[:sensor] or false),
            :input => params[:q]
        }
        ans = %x{curl -G --data-urlencode #{_params.map{|k,v| "#{k}=\"#{v}\""}.join(" --data-urlencode ")} "#{url}"}
        ans = ActiveSupport::JSON.decode(ans)
        render :json => ans
    end
end

PS: To generate an API key, use https://code.google.com/apis/console

Querying Google Places API using jQuery

2 Answers2

Linked