Reading the json file from google maps places api (with javascript or php)

Question

I am building an application in which i am trying to fetch the list of places near to a given lat and long.

i got a api key and entering this on my browser url works and gives me a json file with the places data.

https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&sensor=false&key=AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I

but when i try to fetch and parse it though j query its not giving me anything.

$(document).ready(function(){
$.getJSON('https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&sensor=false&key=AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I',
 function(data) {
  alert(data);
});

i found the following questions on stack overflow but they dint reach me to an answer.

parse google place json with javascript

How do I use Google Places to get an array of Place names?

EDIT:

i tried to get contents of the file using php by

echo file_get_contents("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&sensor=false&key=AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I");

and got the file contents using php.

But is there a way to parse this with jquery or javascript ?

Thank you for your help.

Answer 1

It's not possible using ajax (directly) cross domain request are not allowed. I've tried:

echo file_get_contents("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&sensor=false&key=AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I");

it works for me (wamp 2.0 openssl enabled).

if you succeed in this, you can get the content using your ajax script on the page in the same domain.

EDIT:

The idea is to do an ajax call to your php page, the php page gets data from de google api and returns it. jquery automatically parses json :)

in code:

$.ajax({
  url: 'url_to_your_php',
  data: {
    location:'-33.8670522,151.1957362',
    radius:500,
    sensor:false,
    key:'AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I'},
  dataType: "json"
  type: "GET", //or POST if you want => update your php in that case
  success: function( data ) {
    for(var i in data.results){
       doSomthingWithYourLocation(data.results[i]);
    }
  },
  error: function (request, status, error) {
    //handle errors
  }
});

Your php shoud do somthing like this:

<?php 
    header('Content-type: application/json');
    echo file_get_contents("https://maps.googleapis.com/maps/api/place/search/json?" .
      "location=-" . $_GET['location'] .
      "&radius=" . $_GET['radius'] .
      "&sensor=" . $_GET['sensor'] .
      "&key=" .$_GET['key']);
?>

It is probably best to check the input in the php files but this should work.

Answer 2

A script loaded from one domain can't make an ajax request to another domain. Use the Google Maps JavaScript api to load your data.

Answer 3

The places javascript API can be accessed here: http://code.google.com/apis/maps/documentation/javascript/places.html

Answer 4

You can parse your object data this way:

$(document).ready(function(){
    $.getJSON('https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&sensor=false&key=AIzaSyAImBQiqvaXOQtqeK8VC-9I96kMmB6Mz7I', function(data) {
        $.each(data, function(index,place) {
            alert(place.name);
        });
    });
});

Hope it helps.