Sencha Map AutoComplete Search

[vkondi]

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






}


}



});

[mitchellsimoens]

I have moved this to the ST1 Q&A forum. Please post in the appropriate forum and please wrap your code in code tags.

[msarath]

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

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

Regards,
Sarath.

[chot2]

has any one found a solution for this ?

[abhisharma2]

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!

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