CODEWITHSUNDEEP
javascripthtmlajax
SANR1103219
SANR1103219

Reputation: 143

How to get JSON results placed on Google Maps in my app?

I am creating a simple apps using html5 and JavaScript. I want to show nearest places of any one city so already I set long and lat of a country.

If user click school I want to show all school names nearest of long and lat with radius.
If user click church I want to show all church names nearest of long and lat with radius.
If user click hospital I want to show all hospital names nearest of long and lat with radius. etc.

I only have this link and sample related code:

https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc


$.getJSON("https://maps.googleapis.com/maps/api/place/search/json?",{
        location:"-33.8670522,151.1957362",
        radius: 500,
        types:'food',
        name: 'harbour',
        sensor: false,
        key: 'AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc'
        format: "json"  
    },
    function(data) {
      $.each(data.results, function(i,item){
      $("<img/>").attr("src", results.name).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });

so where I want to change to get place name. initially what do I do?

Upvotes: 3

Views: 5326

Answers (1)

mplungjan
mplungjan

Reputation: 177685

Maps v3 does not support callback/JSONP from a jQuery get/getJSON at this time

http://www.quora.com/Why-doesnt-the-Google-Maps-API-support-JSONP

That said - if you have the patience try looking at

http://code.google.com/intl/no-NO/apis/maps/documentation/javascript/services.html#Geocoding

To load async, you need to do something like this:

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}

http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

If not, here is what I suggest.

USING PROXY:

Unless someone can find a new resource that shows how to do this with jsonp (I could only find resources telling me it was not supported) a way is to write a proxy.

This works FROM THE SAME SERVER

DEMO

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(document).ready(function() {
  $.getJSON("googleapijson.php?type=food",
    function(data, textStatus){
      $.each(data.results,function(i, item) {;
       $("#placenames").append(i+':'+item.vicinity+'<br/>');
    });
  });
});
</script>
</head>
<body> 
 <div id="placenames"></div>
</body>
</html>

PHP: 

<?PHP

header("Content-type: application/json");

/** note you need to grab and clean the parameters from the   
 *  get/post request and build your querystring:   
 */

$type = $_GET["type"]; // this needs to be cleaned

$URL="https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=".$type."&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc"

$json = file_get_contents($URL);

echo $json;
?>

Upvotes: 1

Related Questions