Results 1 to 5 of 5

Thread: Sencha Map AutoComplete Search

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    1
    Vote Rating
    1
      1  

    Question 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

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

    Default 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
      1  

    Default

    has any one found a solution for this ?

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    2
    Vote Rating
    0
      0  

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •