When I run this code I get a blank screen and nothing gets displayed.What changes I have to make in order to get this right and where am I going wrong?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$.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",
function(data, textStatus){
alert(data);
$.each(data.results,function(i, name) {;
$("#placenames").append(i+':'+name.vicinity+'<br/>');
});
});
});
</script>
</head>
<body>
<div id="placenames"></div>
</body>
</html>
Have you tried using Google Maps Javascript API? It does all the JSONP stuff for you.
Here is a demo with your coordinates: http://jsfiddle.net/ThinkingStiff/CjfcX/
Script:
HTML:
Output: