Trying to use Google Places API with JQuery's getJSON function
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?
Answer
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.