Goole places api

[deLta30]

Have anyone been successful in using google places api?
Goolemaps api is working fine with Ext.Map but I can't use google places.
My code:-

tourism.views.Test = Ext.extend(Ext.Panel,{
  
  maps : new Ext.Map({
	  mapOptions : {
                center : new google.maps.LatLng(-33.8665433,151.1956316),  
                zoom: 8,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	  }
       }),
  initComponent: function(){
      var service;      
       var request = {
 	location: pyrmont,
	radius: '50',
        types: ['store']
       };
     this.service = new google.maps.places.PlacesService(this.maps.map);
     this.service.search(request, function (results, status) {
     if (status == google.maps.places.PlacesServiceStatus.OK) {
 	for (var i = 0; i < results.length; i++) {
 	  var place = results[i];
 	  var marker = new google.maps.marker({
 	    position: place.geometry.location,
 	    title: place.name,
 	    icon: place.icon,
 	    map: this.map
 	  });
 	}
     }
     });
    this.items = this.maps;
    tourism.views.Test.superclass.initComponent.call(this);
  } 
});
Ext.reg('Test', tourism.views.Test);

[mitchellsimoens]

You need to do that stuff in or after the maprender event has fired.

[deLta30]

Can you please tell me how to do that?
I have tried to use 'on' method as shown below but it won't work either.


tourism.views.Test = Ext.extend(Ext.Panel,{ maps : new Ext.Map({ mapOptions : { center : new google.maps.LatLng(-33.8665433,151.1956316), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } }), initComponent: function(){
this.items = this.maps; this.maps.on('render',this.places); },
places: function(){
var request = { location: pyrmont, radius: '50', types: ['store'] }; var service = new google.maps.places.PlacesService(this.maps.map); var service.search(request, function (results, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; var marker = new google.maps.marker({ position: place.geometry.location, title: place.name, icon: place.icon, map: this.map }); } } });

[deLta30]

Sorry for the code above. Here is the edited code.

tourism.views.Test = Ext.extend(Ext.Panel,{
  
  maps : new Ext.Map({
      mapOptions : {
                center : new google.maps.LatLng(-33.8665433,151.1956316),  
                zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
       }),
  initComponent: function(){this.items = this.maps;
       this.maps.on('render',this.places);
     },  places: function(){ var request = {
     location: pyrmont,
    radius: '50',
        types: ['store']
       };
     var service = new google.maps.places.PlacesService(this.maps.map);
     var service.search(request, function (results, status) {
     if (status == google.maps.places.PlacesServiceStatus.OK) {
     for (var i = 0; i < results.length; i++) {
       var place = results[i];
       var marker = new google.maps.marker({
         position: place.geometry.location,
         title: place.name,
         icon: place.icon,
         map: this.map
       });
     }
     }
     });

[mitchellsimoens]

http://docs.sencha.com/touch/1-1/#!/...vent-maprender

[mayankse]

I am new to Sencha Touch. Developing application that finds near by places.

but service.nearbySearch(request, callback) is not being called.

Here is my Map Code. Please somebody help!

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


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


    onMapMaprender: function(map, gmap, options) {
        //this.addMarker(51.5006, -0.1246);
        //this.addMarker(37.381592, -122.135672);


        //var service;
        //var infowindow;


        var map;
        var infowindow;
        this.initializePlaces();


    },


    addMarker: function(coordinateX, coordinateY) {
        /*var infoWindow = new google.maps.InfoWindow();


        point = new google.maps.LatLng(
        coordinateX,
        coordinateY
        );


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


        google.maps.event.addListener(marker, "click", function() {
        infoWindow.setContent("Hi Guys");
        infoWindow.open(this.getMap(), marker);
        }); */
    },


    initializePlaces: function() {
        var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
        map1 = new google.maps.Map(this.getMap(), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: pyrmont,
            zoom: 15
        });


        var request = {
            location: pyrmont,
            radius: 500,
            types: ['store']
        };


        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map1);


        service.nearbySearch(request, callback);
    },


    callbackPlaces: function(results, status) {


        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    },


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


        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(place.name);
            infowindow.open(this.getMap(), this);
        });
    }


});