使用jQuery查询Google Places API

时间:2011-05-23 23:18:03

标签: jquery google-places-api

Google Places API现已普遍推出。我试图在jQuery中使用.ajax()调用来调用Google Places。我一直回来的错误是未捕获的SyntaxError:意外的令牌:

我正在使用jQuery 1.5.2。我也尝试了1.5.1,但结果相同。如果我能提供帮助,我宁愿不转向1.6.1。

我从那时起就已经对其他API进行了类似这样的ajax调用,但是我遇到了Google Places的问题。以下是您可以使用的基本代码示例。您需要在Google控制台上提供自己的密钥(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);
   }
   });
 });

2 个答案:

答案 0 :(得分:5)

从文档中我可以看到,Google Places Web Service API 支持JSONP - 仅限JSON。您看到的错误是因为响应只是JSON,但正在被解析,好像它是JSONP并导致错误。

查看Google Maps JavaScript API - 它包含您可以使用的地方信息库 - 请参阅google.maps.places.PlacesServices#search()

AFAIK,似乎正在转向删除JSONP支持 - 例如,地理编码API用于支持v2中的JSONP(未记录)但不再支持v3。有人建议可能是为了鼓励开发人员使用JavaScript API。

答案 1 :(得分:4)

以下不是直接解决方案。但是,这就是我如何运作......

由于不支持JSONP(我不明白客户端代码应该如何使用该API),解决方案是通过服务器代理它......如果你在服务器端使用rails ,以下可能适合您:

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:要生成API密钥,请使用https://code.google.com/apis/console