PDA

View Full Version : Load store for autocomplete combobox from JavaScript Object-Method (Google Geocoder)



martina.loescher@yahoo.de
2 Jan 2013, 5:05 AM
Hi,
i want to create an autocomplete combobox for geocoding adresses entered by user.
I'm using the Google Maps JavaScript Api v3 that has an geocoding object that works as shown below, but i do not know how to create a store for the combo that loads data from a local javascript object not from server...
Can someone help me?
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
var address = '97922 Lauda';
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry.location);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
</script

mitchellsimoens
4 Jan 2013, 8:12 AM
I would just add the data to the store there.

martina.loescher@yahoo.de
4 Jan 2013, 10:00 AM
Hi,
thx a lot for your reply.
Yes, i also considered that, but it must be an autocomplete combobox.

The autocomplete combobox has to query/load the store after the user typed some
characters and after a delay of perhaps 500ms.
Par example: the user types a
part his own postal-code or adress in the combo and the autocomplete loads '
suggestions' with whole matching adress and according geometry data from google.

So, in my usecase, if user selects one of these adresses, the
geometry.location of these selected adress will be used to populate a grid
containing barber-events in barber shops in a defined circumcircle of users
location.

My problem is:
I know how to create a ext js model with
proxy and store that sends ajax requests to the server and am able to implement
the server side methods to deliver a json result that will be loaded in store of
combobox (autocomplete or not..).

But I did not find any documentation
or example how to create a proxy that queries using a local JavaScript
Object-method and hands over the params and callback and loads the json-data
returned by google into the store.

Unfortunately, the http-google geocoding service v3 does not support jsonp. they want us to use the javascript geocoder. All examples with ext js autocomplete combo, available in net, don't work and many people asking in forums how to do.

I found an interesting codesnippet for ext js autocompletecombo (maybe 3.4)
with google geocoder that looked nice, but does not work... the combo shows
"loading" and does not respond anymore:


<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
..

..
var geocoder = new google.maps.Geocoder();
// Create the combo
box, attached to the geocode data store
var cmbGeocode = new
Ext.form.ComboBox({
id: 'cmbGeocode_Id',
fieldLabel: 'Standort',
hideTrigger: true,
minChars: 3,
autoLoad: 'true',
width: 350,
displayField: 'address',
store: new Ext.data.JsonStore({
root: null,
fields: [ "formatted_address",
{name: "lonlat", convert: function(v, rec) { var latLng = rec.geometry.location;
return [latLng.lng(),
latLng.lat()]; }},
{name: "bounds", convert: function(v, rec) { var ne =
rec.geometry.viewport.getNorthEast(),
sw =
rec.geometry.viewport.getSouthWest();
return [sw.lng(), sw.lat(), ne.lng(),
ne.lat()]; }} ],
proxy: new (Ext.extend(Ext.data.DataProxy,
{ doRequest:
function(action, rs, params, reader, callback, scope, options)
{
geocoder.geocode({ address: params.q },
function (results, status)
{
var readerResult =
reader.readRecords(results);
callback.call(scope, readerResult, options, !!readerResult);
});
}
}))({ api: { read: true } })
}),

listeners: {
'select' : function(cmb, rec, idx) {
alert("select");


}
}
});

mitchellsimoens
4 Jan 2013, 11:26 AM
Make your combo a local combo since the data will be in the store. Set this on the combo to do this:


queryMode : 'local'