1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Vote Rating
    0
    deLta30 is on a distinguished road

      0  

    Default Answered: Goole places api

    Answered: Goole places api


    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:-

    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);
    Last edited by mitchellsimoens; 11 Mar 2012 at 6:32 AM. Reason: added [CODE] tags

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You need to do that stuff in or after the maprender event has fired.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Vote Rating
    0
    deLta30 is on a distinguished road

      0  

    Default


    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 }); } } });

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Vote Rating
    0
    deLta30 is on a distinguished road

      0  

    Default


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

    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 &lt; 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
           });
         }
         }
         });

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    mayankse is on a distinguished road

      0  

    Default same issue with Google Map API

    same issue with Google Map API


    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!

    Code:
    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);
            });
        }
    
    
    });

Thread Participants: 2

Tags for this Thread