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

Question

I am working on Google Places from https://developers.google.com/places/documentation/search

After adding api key this 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 i want to parse these response with JQuery.Ajax() it gives me error.

I cant find the reason behind this error.How can i 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>

Dr.Molle Dr.Molle · Accepted Answer · 2013-07-31T21:02:50

The linked ressource is not accessible via AJAX, because the access is restricted by same-origin-policy and JSONP is not supported.

Use the nearbySearch of the javascript-places-library to get the result on clientside.

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

2 Answers