如何解决Google API中的此错误？

Question

When I run this code I get the following error

error:
invalid label
"html_attributions" : [ --------json?l...4845749 (line 2)

and nothing gets displayed.What changes I have to make in order to get this right and where am I going wrong?

<script src="http://www.mattcashatt.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>



<input id="Company" type="text" /><input id="goButton" type="button" value="Go" /><div id="Placeholder"></div>

this is my java script:

<script type="text/javascript">$('#goButton').click(function(){$.getJSON("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types="+$('#Company').val()+"&name=harbour&sensor=false&key=AIzaSyC1BIAzM34uk6SLY40s-nmXMivPJDfWgTc&callback=?",function (data){$('#Placeholder').html("");$('#Placeholder').append(<h1>Company name:</h1>" + data.name + "<br/><br/>");$('#Placeholder').append("<h1> page:</h1>" + data.types + "<br/><br/>");$('#Placeholder').append("<h1>Likes:</h1>" + data.vicinity + "<br/><br/>"); });});

Answer 1

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

Also PLEASE use a current jQuery - for example like this

<script type="text/javascript"
 src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // your code here
  });
</script>

Answer 2

you can try this and see what is getting logged in console.

<script type="text/javascript">
    $('#goButton').click(function(){
      $.getJSON("https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types="+$('#Company').val()+"&name=harbour&sensor=false&key=AIzaSjC1BIA2M34uk6SLY401-nmXMivPJDfWgTc&callback=?", function (data){
console.log(data);
      $('#Placeholder').html("");
      $('#Placeholder').append(<h1>Company name:</h1>" + data.name + "<br/><br/>");
      $('#Placeholder').append("<h1> page:</h1>" + data.types + "<br/><br/>");
      $('#Placeholder').append("<h1>Likes:</h1>" + data.vicinity + "<br/><br/>"); 
    });
    });
    </script>

I get something like this:

{
   "html_attributions" : [],
   "results" : [],
   "status" : "REQUEST_DENIED"
}

so you need use "data" variable accordingly. Something like data.results etc.