jquery - Custom Google place search returns error with $.ajax() -

i working on google places https://developers.google.com/places/documentation/search

after adding api key url

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

gives me pretty fine json response in browser.but whenever want parse these response jquery.ajax() gives me error.

i cant find reason behind error.how can solve these problem?thanks.

js:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>    <script type="text/javascript">      $(document).ready(function() {         $("#submit").click(function(event){             var url="https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=<mykey>";              $.ajax({                 url: url,                 type:'post',                 datatype: 'json',                 success: function(data)                 {                     alert("success");                  },                 error:function(){                     alert("error");                 }             });          });     });  </script> 

html:

<button id="submit">press</button> 

the linked ressource not accessible via ajax, because access restricted same-origin-policy , jsonp not supported.

use nearbysearch of javascript-places-library result on clientside.