Google Place API v3 with Sencha Touch 2.x

Question

I am new to Sencha Touch, knows Javascript,jQuery,HTML5.

I am developing simple Google Map application with Sencha Touch + Sencha Architect where it place marker on current position and also use Google Place to find 'store'(i.e. types need for Google place search) near the current location. I am getting the locations in 'callbackPlaces' (i.e. latitude, longitude) but Google.Maps.Marker gives error in 'callbackPlaces' method (i.e. called through 'addMarker' method and I also tried and tested by putting Google.Maps.Marker in 'callbackPlaces').

Ext.define('MyApp.view.Map', {
    extend: 'Ext.Map',
    alias: 'widget.map',

    config: {
        useCurrentLocation: true,
        listeners: [
            {
                fn: 'onMapMaprender',
                event: 'maprender'
            }
        ]
    },

    onMapMaprender: function(map, gmap, options) {
        this.initializePlaces();
    },

    initializePlaces: function() {

        //Set Marker on Current Position
        var geo = this.getGeo();
        var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
        this.createMarker(currentPosition);

        //request set for Places Services
        var request = {
            location: currentPosition,
            radius: 500,
            types: ['store']
        };


        this.getMap().zoom = 15;

        // Call PlacesService
        var service = new google.maps.places.PlacesService(this.getMap());
        service.nearbySearch(request, this.callbackPlaces); 



    },

    callbackPlaces: function(results, status) {

        if (status == google.maps.places.PlacesServiceStatus.OK) {  

            for (var i = 0; i < results.length; i++) {
                addMarker(results[i]);
            }
        }
    },

    createMarker: function(position) {
        //Here Position = Google Map LatLng

        var infoWindow = new google.maps.InfoWindow();

        var marker = new google.maps.Marker({
            map: this.getMap(),
            position: position
        });

        google.maps.event.addListener(marker, "click", function() {    
            infoWindow.setContent("Lng: " + marker.position.lng() + "\n Lat: " + marker.position.lat());
            infoWindow.open(this.getMap(), marker);
        }); 
    },

    addMarker: function() {
        //Here Place = google.maps.places

        var infoWindow = new google.maps.InfoWindow();

        var marker = new google.maps.Marker({
            map: this.getMap(),
            position: place.geometry.location
        });


        google.maps.event.addListener(marker, "click", function() {    
            infoWindow.setContent("Lng: " + marker.position.lng() + "\n Lat: " + marker.position.lat());
            infoWindow.open(this.getMap(), marker);
        }); 
    }

});

I don't know what went wrong!

Any help|hint would appreciated!

Thanks in advance.

Answer 1

You pointed out there was a scope issue in the callbackPlaces function.

Therefore you should replace the following line:

service.nearbySearch(request, this.callbackPlaces); 

with

service.nearbySearch(request, function (results, status) {
  this.callbackPlaces.call(this, [results, status]);
}); 

Hope this helps