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

      1  

    Question Unanswered: Sencha Map AutoComplete Search

    Unanswered: Sencha Map AutoComplete Search


    I am trying to create an autocomplete map search application in sencha but i am not able to do so.
    I have created the search option in a floating panel.
    Can anyone provide me the code necessary to implement such an application?
    Thanks in Advance.

    Below is the Code:

    var mapApp = new Ext.Application({
    name:"app",
    launch:function(){

    var text = new Ext.form.Text({
    width:'65%'
    });


    var floatpan = new Ext.Panel({

    height:450,
    width:'25%',
    floating:true,
    hideOnMaskTap:false,

    items:[
    {
    xtype:'toolbar',
    title:'Search Location Here',
    items:[
    {
    xtype:'button',
    text:'X',
    align:'right',
    listeners:
    {
    tap:function(button,e)
    {
    floatpan.hide();
    }
    }
    }
    ]
    },
    text,
    {
    xtype:'button',
    text:'Search',
    width:'35%'
    },


    {
    xtype:'list',
    width:'100%',
    store:app.stores.Search,
    scroll:'both',
    grouped:false,
    itemTpl:'<h4>{city}</h4>',
    listeners:
    {
    itemtap: function(dis,index,item,e)
    {
    if(index==0)
    {
    new Ext.Panel({

    fullscreen:true,
    items:[
    {
    xtype:"map",
    mapOptions: {
    center: new google.maps.LatLng(-2,20),
    zoom:4,
    navigationControl:true,
    navigationControlOptions:
    {
    style: google.maps.NavigationControlStyle.DEFAULT
    }
    }
    }
    ]

    });


    }
    }
    }
    }
    ]
    });


    var toolbartop = new Ext.Toolbar({
    title:'Map Search'
    });


    var toolbardown =new Ext.Toolbar({

    dock:'bottom',
    layout:
    {
    pack:'center'
    },
    items:[
    {
    xtype:'button',
    text:'Middle East ',
    listeners:{
    tap:function(button,e)
    {
    new Ext.Panel({
    fullscreen:true,
    items:[
    {
    xtype:"map",
    mapOptions: {
    center: new google.maps.LatLng(15,60),
    zoom:4,
    navigationControl:true,
    navigationControlOptions:
    {
    style: google.maps.NavigationControlStyle.DEFAULT
    }
    }
    }
    ]
    });

    }
    }
    },
    {
    xtype:'button',
    text:'Arabian Sea',
    listeners:{
    tap:function(button,e)
    {
    new Ext.Panel({
    fullscreen:true,

    items:[
    {
    xtype:"map",
    id:"map",
    mapOptions: {
    center: new google.maps.LatLng(18,72),
    zoom:12,
    navigationControl:true,
    navigationControlOptions:
    {
    style: google.maps.NavigationControlStyle.DEFAULT
    }
    }
    }
    ]
    });

    }
    }
    },

    {
    xtype:'button',
    text:'Search',
    listeners:
    {
    tap:function(button,e)
    {
    floatpan.show();
    floatpan.setPosition(220,100);
    mapApp.searchCall();

    }
    }
    }
    ]
    });


    var panel =new Ext.Panel({
    fullscreen:true,
    dockedItems:[toolbartop,toolbardown]
    });

    panel.show();


    searchCall: function() {
    alert("search call function called");


    var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom:3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);


    var input = mapApp.text.getId();
    var autocomplete = new google.maps.places.Autocomplete(input);






    }


    }



    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,387
    Answers
    3548
    Vote Rating
    848
    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


    I have moved this to the ST1 Q&A forum. Please post in the appropriate forum and please wrap your code in code tags.
    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.

  3. #3
    Sencha User msarath's Avatar
    Join Date
    Oct 2009
    Location
    Bangalore, IN
    Posts
    20
    Vote Rating
    1
    msarath is on a distinguished road

      1  

    Default Have you got the solution?

    Have you got the solution?


    Hi,

    I am also having similar requirement but couldn't able to get it working using Sencha.
    http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

    C
    ould you please let me know if you were able to get this?

    Regards,
    Sarath.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    37
    Vote Rating
    1
    chot2 is on a distinguished road

      1  

    Default


    has any one found a solution for this ?

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    2
    Vote Rating
    0
    abhisharma2 is on a distinguished road

      0  

    Default autocomplete Google on Sencha Touch 2.0

    autocomplete Google on Sencha Touch 2.0


    Also having problems with getting Google Places autocomplete feature to work. Looks like Google creates it's own Ext so that it's outside of Sencha. Because of this it looks like the the listener to fire the on Tap isn't working for autocomplete. See our code below - - anyone seen any breakthru's on this? Thanks!

    Code:
    function CreateAutoComplete()
    {
        var input = document.getElementsByName('searchloc')[0]; 
        this.autocomplete = new google.maps.places.Autocomplete(input);
        this.autocomplete.bindTo('bounds', this.map.getMap());
        
        google.maps.event.addListener(this.autocomplete, 'place_changed', 
        function() 
        {
            var place = MainApp.app.eventMap.autocomplete.getPlace();
            if (place.geometry.viewport) 
            {
                MainApp.app.eventMap.map.getMap().fitBounds(place.geometry.viewport);
            } 
            else 
            {
                MainApp.app.eventMap.map.getMap().setCenter(place.geometry.location);
                MainApp.app.eventMap.map.getMap().setZoom(17);
            }
            
            MainApp.app.eventMap.lat = place.geometry.location.Ya;
            MainApp.app.eventMap.lon = place.geometry.location.Za;
            
            MainApp.app.newEventForm.screen.setValues(
            {
                  location : place.name
            });
        });
    }