Having issues with google maps using sencha touch

Question

I am new to sencha touch but the error I am getting seems to be related to google maps api. I am making a call to google maps api to search for aa specific place in sencha touch. But I am getting below error

Here is my code inside store/Places.js file

Ext.define('TestIOS.store.Places', {
extend: 'Ext.data.Store',
config: {
    model: 'TestIOS.model.Place',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
        reader: {
            type: 'json',
            rootProperty: 'results'
        }
    }
}
});

How can I solve this error?

Answer 1

It is due to Same Origin Policy so to get the data from other servers we have to use JSONP But it seems that the latest version of the Google Maps API (v3) does not support jsonp . As a result, if you want to geocode, you're going to need to use the maps api:

include

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

in index.html before adding sencha microloader

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

and to get any address use google geocoder EX:

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': name of location },
        function(results, status) { console.log(results[0].geometry.location); });