Intentando usar Google Places API con la función getJSON de JQuery

Esto es probablemente muy básico, pero estoy tratando de probar la API de Google Places. Repaso la documentación y uso algunos de los ejemplos que proporcionan. Intento usar la función JQuery getJSON porque pude usarla con éxito para acceder a archivos JSON externos de forma asincrónica con ella, así que pensé que sería un buen enfoque para obtener los resultados JSON de la consulta de Google Places. Este es el código que estoy tratando de usar:Intentando usar Google Places API con la función getJSON de JQuery

<body> 
<div id="message"></div> 
<script type="text/javascript"> 

    var requestURL = 'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key'; 
    $(document).ready(function() { 
     $.getJSON(requestURL, function (data) { 

      for (i = 0; i < data.results.length; i++) { 
       myAddress[i] = data.results[i].formatted_address; 
       document.getElementById("message").innerHTML += myAddress[i] + "<br>"; 
       console.log(myAddress[i]); 
      } 

     }); 
    }); 


</script> 

</body>

De acuerdo con la documentación de la respuesta JSON resultante de la consulta debe ser el siguiente:

{ 
    "html_attributions" : [ 
     "Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e" 
    ], 
    "results" : [ 
     { 
     "formatted_address" : "529 Kent Street, Sydney NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8750460, 
       "lng" : 151.2052720 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", 
     "id" : "827f1ac561d72ec25897df088199315f7cbbc8ed", 
     "name" : "Tetsuya's", 
     "rating" : 4.30, 
     "reference" : "CnRmAAAAmmm3dlSVT3E7rIvwQ0lHBA4sayvxWEc4nZaXSSjRtfKRGoYnfr3d5AvQGk4e0u3oOErXsIJwtd3Wck1Onyw6pCzr8swW4E7dZ6wP4dV6AsXPvodwdVyqHgyGE_K8DqSp5McW_nFcci_-1jXb5Phv-RIQTzv5BjIGS0ufgTslfC6dqBoU7tw8NKUDHg28bPJlL0vGVWVgbTg", 
     "types" : [ "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8583790, 
       "lng" : 151.2100270 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/cafe-71.png", 
     "id" : "f181b872b9bc680c8966df3e5770ae9839115440", 
     "name" : "Quay", 
     "rating" : 4.10, 
     "reference" : "CnRiAAAADmPDOkn3znv_fX78Ma6X5_t7caEGNdSWnpwMIdDNZkLpVKPnQJXP1ghlySO-ixqs28UtDmJaOlCHn18pxpj7UQjRzR4Kmye6Gijoqoox9bpkaCAJatbJGZEIIUwRbTNIE_L2jGo5BDqiosqU2F5QdBIQbXKrvfQuo6rmu8285j7bDBoUrGrN4r6XQ-PVm260PFt5kwc3EfY", 
     "types" : [ "cafe", "bar", "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "107 George Street, The Rocks NSW, Australia", 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8597750, 
       "lng" : 151.2085920 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", 
     "id" : "7beacea28938ae42bcac04faf79a607bf84409e6", 
     "name" : "Rockpool", 
     "rating" : 4.0, 
     "reference" : "CnRlAAAAVK4Ek78r9yHV56I-zbaTxo9YiroCbTlel-ZRj2i6yGAkLwNMm_flMhCl3j8ZHN-jJyG1TvKqBBnKQS2z4Tceu-1kZupZ1HSo5JWRBKd7qt2vKgT8VauiEBQL-zJiKVzSy5rFfilKDLSiLusmdi88ThIQqqj6hKHn5awdj6C4f59ifRoUg67KlbpuGuuW7S1tAH_EyBl6KE4", 
     "types" : [ "restaurant", "food", "establishment" ] 
     }, 
     { 
     "formatted_address" : "483 George Street, Sydney NSW, Australia", 
     "events" : [ 
      { 
       "event_id" : "7lH_gK1GphU", 
       "summary" : "Google Maps Developer Meetup: Rockin' out with the Places API", 
       "url" : "https://developers.google.com/places" 
      } 
      ], 
     "geometry" : { 
      "location" : { 
       "lat" : -33.8731950, 
       "lng" : 151.2063380 
      } 
     }, 
     "icon" : "http://maps.gstatic.com/mapfiles/place_api/icons/civic_building-71.png", 
     "id" : "017049cb4e82412aaf0efbde890e82b7f2987c16", 
     "name" : "Chinatown Sydney", 
     "rating" : 4.0, 
     "reference" : "CnRuAAAAsLNeRQtKD7TEUXWG6gYD7ByOVKjQE61GSyeGZrX-pOPVps2BaLBlH0zBHlrVU9DKhsuXra075loWmZUCbczKDPdCaP9FVJXB2NsZ1q7188pqRFik58S9Z1lcWjyVoVqvdUUt9bDMLqxVT4ENmolbgBIQ9Wy0sgDy0BgWyg5kfPMHCxoUOvmhfKC-lTefXGgnsRqEQwn8M0I", 
     "types" : [ 
      "city_hall", 
      "park", 
      "restaurant", 
      "doctor", 
      "train_station", 
      "local_government_office", 
      "food", 
      "health", 
      "establishment" 
     ] 
     } 
    ], 
    "status" : "OK" 
}

Si copio este script JSON y guardarlo a un archivo, puedo acceder a ella y se muestra el resultado siguiente en el navegador:

529 Kent Street, Sydney NSW, Australia Alto Nivel, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia 107 George Calle, T Rocks NSW, Australia 483 George Street, Sydney NSW, Australia

Lo que significa que funciona. ¿La función getJSON no analiza correctamente el script JSON?

Fuente

2012-07-25 rocklandcitizen

Ver esta respuesta http://stackoverflow.com/questions/5564830/parsing- google-geo-api-reverse-geocoding-with-jquery/39276042 # answer-39276042 –

Yo recomendaría usar el Places Library del Google Maps JavaScript API v3.

Puede encontrar demostraciones y documentación de cómo usarlo here.

Fuente

2012-07-25 04:03:31

Eso puede funcionar, pero tengo mucha curiosidad de por qué este código no funcionará con scripts JSON remotos. Por lo que pude ver, Google realmente no muestra ejemplos dignos de cómo consumir su servicio Google Places usando AJAX. ¿Cómo la gente normalmente lo hace? Gracias por la respuesta por cierto. – rocklandcitizen

Ok, más o menos lo descubrí. Descubrí lo que debes hacer para que la función getJSON devuelva los datos analizados de JSON. Tienes que agregar "callback =?" a la cadena de consulta.

'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key="myKey"&callback=?';

Sin embargo, ahora el problema es que ahora me sale un error en mi consola diciendo que:

SyntaxError: invalid label 
[Break On This Error] 

"html_attributions" : [ 

json?l...0080533 (line 2, col 3)

cual es raro porque he comprobado la respuesta en JSONLint y el formato es válido. Además, la misma respuesta funciona si se lee desde un archivo local.

Fuente

2012-07-28 21:35:32 rocklandcitizen

'callback' es necesario para convertir una salida JSON en una salida JSONP. Solo JSONP se puede usar en JQM. –

favor Pruebe continuación Código

 <body> 
    <div id="message"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.ajax({ 
     type: 'GET', 
     url: 'https://maps.googleapis.com/maps/api/place/searc/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key='my_google_places_key';', 
     async: false, 
     jsonpCallback: 'jsonCallback', 
     contentType: "application/json", 
     dataType: 'jsonp', 
     success: function (data) { 
      for (i = 0; i < data.results.length; i++) { 
      myAddress[i] = data.results[i].formatted_address; 
      document.getElementById("message").innerHTML += myAddress[i] + "<br>"; 
      console.log(myAddress[i]); 
     }; 
     }, 
     error: function (e) { 
      console.log(e.message); 
     } 
    }); 
}); 
</script> 
</body>

que necesita para que sea lo más JSON de devolución de llamada, ya que es llamada entre dominios

Fuente

2013-10-23 10:57:49

¡su enlace no es correcto! lo has intentado? –

Intentando usar Google Places API con la función getJSON de JQuery

Respuesta

Cuestiones relacionadas