Menu
This is probably very basic but I'm trying to test the Google Places API. I'm going through the documentation and using some of the examples they provide. I'm trying to use the JQuery getJSON function because I've been able to successfully use it to access external JSON files asynchronously with it, so I thought it might be a good approach to getting the JSON results of the Google Places query. This is the code I'm trying to use:
<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>
According to the documentation the resulting JSON response to the query should be as follows:
{
"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"
}
If I copy this JSON script and save it to a file, I can access it and it displays the following result on the browser:
529 Kent Street, Sydney NSW, Australia Upper Level, Overseas Passenger Terminal/5 Hickson Road, The Rocks NSW, Australia 107 George Street, The Rocks NSW, Australia 483 George Street, Sydney NSW, Australia
Which means it works. Is the getJSON function not parsing the JSON script properly?
691
I would recommend using the Places Library of the Google Maps JavaScript API v3.
You can find demo's and documentation of how to use it here.
88
Ok, I more or less figured it out. I figured out what you need to do so that the getJSON function returns the JSON parsed data. You have to add "callback=?" to the query string.
'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=?';
However, now the problem is that I now get an error in my console saying that:
SyntaxError: invalid label
[Break On This Error]
"html_attributions" : [
json?l...0080533 (line 2, col 3)
Which is weird because I checked the response in JSONLint and the format is valid. Also, the same response works if it's read from a local file.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With