Question

This is my code. Why it is showing empty results? Can you spot any wrong in my code?

$(document).ready(function() {
  $.getJSON("https://maps.googleapis.com/maps/api/place/details/json?reference=CmRYAAAAciqGsTRX1mXRvuXSH2ErwW-jCINE1aLiwP64MCWDN5vkXvXoQGPKldMfmdGyqWSpm7BEYCgDm-iv7Kc2PF7QA7brMAwBbAcqMr5i1f4PwTpaovIZjysCEZTry8Ez30wpEhCNCXpynextCld2EBsDkRKsGhSLayuRyFsex6JA6NPh9dyupoTH3g&sensor=true&key=AIzaSyBgWOenfvzi-x7n1Xu-WLQx4ltFkuRNrhQ",
   function(data, textStatus){
      $("#placenamesss").append(data.result[0].formatted_phone_number+'<br/>');
   });
});

Is the correct way to do it or not? How do I get formatted_phone_number

Answer 1

You’re doing cross XHR requests, which won’t work for security reasons. You’ll have to create a proxy, like a small PHP script that will obtain the information and output it to you.

Warning, the following should be secured!!

Your PHP file (let’s call it proxy.php) could look something like this:

<?php 

echo file_get_contents($_GET['url']);

?>

And your jQuery, something similar to:

$(document).ready(function() {
    $.getJSON("proxy.php?url=https://maps.googleapis.com/maps/api/place/details/json?reference=CmRYAAAAciqGsTRX1mXRvuXSH2ErwW-jCINE1aLiwP64MCWDN5vkXvXoQGPKldMfmdGyqWSpm7BEYCgDm-iv7Kc2PF7QA7brMAwBbAcqMr5i1f4PwTpaovIZjysCEZTry8Ez30wpEhCNCXpynextCld2EBsDkRKsGhSLayuRyFsex6JA6NPh9dyupoTH3g&sensor=true&key=AIzaSyBgWOenfvzi-x7n1Xu-WLQx4ltFkuRNrhQ", function(data, textStatus){

        $("#placenamesss").append(data.result[0].formatted_phone_number+'<br/>');

    });
});