Parsing JSON result from Google Places API
I am trying to retrieve information from Google API Nearby Places and show results under simple HTML format. While doing so i am facing different issues because of my lack of knowledge in Javascript.
I would appreciate code examples but would LOVE explanation through code, NOT docs.
Basically this URL https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&key=MY_API_KEY
Outputs this data (note this is only one result out of the many (see URL for all results + correct npt)
{
"html_attributions" : [],
"next_page_token" : "here is token too long",
"results" : [
{
"geometry" : {
"location" : {
"lat" : -33.87036190000001,
"lng" : 151.1978505
},
"viewport" : {
"northeast" : {
"lat" : -33.8690182697085,
"lng" : 151.1991515302915
},
"southwest" : {
"lat" : -33.8717162302915,
"lng" : 151.1964535697085
}
}
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
"id" : "e58f0f9ecaf15ab719d305b93265cafc00b01a3f",
"name" : "The Little Snail Restaurant",
"opening_hours" : {
"open_now" : true,
"weekday_text" : []
},
"photos" : [
{
"height" : 585,
"html_attributions" : [
"u003ca href="https://maps.google.com/maps/contrib/114727320476039103791/photos"u003eThe Little Snail Restaurantu003c/au003e"
],
"photo_reference" : "CmRYAAAA9JX9PTn1bmb7I-51-6qHIkb8-FC54UOoInko8dlSWGMBn3Lsuu9KrnJuF8nMsWkmzKtvPdx3rjxkZJ6DzC2ossHhTP7Fk3m2P-no8v0hDAbMzPvgEUmnXTQw9ziku2FzEhCwAMb0F48RPS9i0z1-dKlzGhTWBAu81Wxih_X6hatmN6264p_RdA",
"width" : 582
}
],
"place_id" : "ChIJtwapWjeuEmsRcxV5JARHpSk",
"price_level" : 2,
"rating" : 4.2,
"reference" : "CmRRAAAAtVf1uNEV0aXI3PY8VrYSsvt_MpcKlA8DQuHDv3X4AxhMySFbpLgU5FUtKCf-im0HeLDz7bisAHJ81HRW53Pjag4W4L4bPTDWi1vD125x2710YzO0-IQY_vl6OSJ4mbZAEhBi5XRRsGJlCfX-PszD2271GhQt73oy2T3dIiUQ7_yz60rZAas0nw",
"scope" : "GOOGLE",
"types" : [ "restaurant", "food", "point_of_interest", "establishment" ],
"vicinity" : "3/50 Murray Street, Pyrmont"
},
So far i have read Google NP Docs, watch 2 40mn videos on youtube on how to work with JSON (which is great) and read as much as i could in StackOverflow to see if someone had a tiny bit of code for me to start with but no chances.
It seems that most of the info is for Android Usage and no actual Code Sample is given by Google (which is weird because their are many sample for maps related queries).
Anyways, if i use the XMLHttpRequest the console will provide me an error with Access Control Allow Origin , so all the stuff i read online (W3C mostly) and seen on youtube on how to work with JSON and AJAX (even written some lines to pull info from URL and play around with it) will serve me none for this purpose as i believe Google has its own way of pulling JSON to avoid the ACAO issue. I also tried JQUERY Json Parse but it does not work and i get the same result.
So at the end, i started 20 hours ago not knowing what JSON and got to work with a JSON file pulled from an URL around 2 hours later. But 18 hours have passed an i believe there is a time when help is need, I actually have NO IDEA where to start from.
Please read the following SO question for a detailed explanation of your issue :- XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
A simple fix is to use the ' $.getJSON() ' method and pass a ' callback=? ' parameter in the URL.
Please find below a link to a working sample of the same :-
https://plnkr.co/edit/akJqmQPsA9cT0t2nrmWJ?p=catalogue
IMP : Remember to substitute your own API key, without the angular brackets.
$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&key=<API_KEY>&callback=?", function(data){
console.log("Data: " + data);
});
Also, as already mentioned in one of the comments, please remove the API key from the question, as it is meant to be private and can be misused.
Hope this helps!
链接地址: http://www.djcxy.com/p/45970.html上一篇: 你如何正确和可靠地加载JSON数据交叉