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);
   }
   });
 });

Answer 1

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.

Answer 2

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