PDA

View Full Version : [SOLVED]ComboBox and GoogleMap suggest



boyquotes
10 Jan 2011, 7:06 AM
Hello,

I try to do a text input with googlemap city suggestion.

I understand, i'll do a combonox with a option "hideTrigger: true," for have a input type with the combobox, but i don't understand to dynamically refresh the store(the google url and json result) when keyup...

I'll must use ajax refresh on this url for sample:
http://maps.google.com/maps/geo?q=a or other letter
How to declare a store with a param value and a ajax request.

My code, but don't work fine:

var store = new Ext.data.JsonStore({
url: 'http://localhost/extjs/datastore_google.php',
idProperty: 'id',
fields: ['id','address']
});

var combo = new Ext.form.ComboBox({
store: store,
displayField:'address',
typeAhead: true,
mode: 'remote',
minChars:2,
queryParam: 'query', //contents of the field sent to server.
hideTrigger: true, //hide trigger so it doesn't look like a combobox.
selectOnFocus:true,
width: 250,
renderTo: 'autocomplete', //the id of the html element to render to.
//Not necessary if this is in an Ext formPanel.

listeners:{
'keyup':function(tf,e){

alert('http://maps.google.com/maps/geo?q='+tf.getValue());

}
}and the store of googlemap response (word begin with co...):

{
"name": "co",
"Status": {
"code": 200,
"request": "geocode"
},
"Placemark": [ {
"id": "p1",
"address": "Colorado, États-Unis",
"AddressDetails": {
"Accuracy" : 2,
"Country" : {
"AdministrativeArea" : {
"AdministrativeAreaName" : "CO"
},
"CountryName" : "USA",
"CountryNameCode" : "US"
}
},
"ExtendedData": {
"LatLonBox": {
"north": 41.7174526,
"south": 37.3127674,
"east": -101.6841669,
"west": -109.8799679
}
},
"Point": {
"coordinates": [ -105.7820674, 39.5500507, 0 ]
}
} ]
}
And what is the root of this json result for sample:
http://maps.google.com/maps/geo?q=a

Placemark it's the root of the store? id->for id and address for display?

Thanks in advance for any help or advice, and sorry for my english...
Nicolas.

boyquotes
11 Jan 2011, 2:09 AM
I try with HttpProxy, but not


var genres1 = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'http://maps.google.com/maps/geo?q=co',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'rows',
fields: ['dcID', 'dcName']
}),
autoLoad: true,
baseParams: {
type: '2'
}
});

But i have this error:

Origin http://localhost is not allowed by Access-Control-Allow-Origi

The url may be obligatorily a localhost url?

Thanks,
Nicolas

VinylFox
11 Jan 2011, 5:58 AM
You will need to set the root as "Placemark" on your store, however the idProperty is not required.

To refresh the store you will need to call the 'load' method of your store and pass it a config with a params property containing the params you want to send. In your case, the param would be 'q' with a value of the search term.

Also, if you want to make a direct request to google.com (instead of your proxy php page) then you will need to use a ScriptTagProxy.

Condor
11 Jan 2011, 6:11 AM
Note: ScriptTagProxy uses the so called JSON-P protocol. You have to specify an extra parameter in your request to Google to make Google use JSON-P protocol.

VinylFox
11 Jan 2011, 6:25 AM
Right, so your ScriptTagProxy would need to have the config option callbackParam: 'callback'.

But if you already have a PHP proxy page setup (as you show in your first code sample), I would just use that instead.

Condor
11 Jan 2011, 6:31 AM
Ah! for this API the parameter that specifies JSONP protocol IS the callback parameter, so a ScriptTagProxy will work automatically, because 'callback' is the default callback parameter name.

boyquotes
11 Jan 2011, 8:01 AM
@VinylFox and Condor: Thanks for advices.

This code works now ;):


var city = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://maps.google.com/maps/geo',
method: 'GET'
}),
params: {q: val},
reader: new Ext.data.JsonReader({
root: 'Placemark',
fields: ['id', 'address'],
callback: function() {
combo.getValue();
}
}),


});

var combo = new Ext.form.ComboBox({
store: city,
displayField:'address',
typeAhead: true,
mode: 'remote',
minChars:2,
queryParam: 'q', //contents of the field sent to server.
hideTrigger: true, //hide trigger so it doesn't look like a combobox.
selectOnFocus:true,
width: 250,
renderTo: 'autocomplete', //the id of the html element to render to.
//Not necessary if this is in an Ext formPanel.
});

var val = combo.getValue();

In a separate form, the combobox works fine, but I try to integrate this code/field into the admin interface of tomatoCart ( e-commerce solution bases on extJS -> http://www.tomatocart.com/ ), but the query return a empty combox.

It's because my resquest came of the restricted admin area and google don't provide any response? or may be with the interaction with extJS of tomatocart?

Thanks,
Nicolas.

VinylFox
11 Jan 2011, 8:45 AM
You should use FireBug and see what is happening in the NET tab when the request is made to google.

boyquotes
11 Jan 2011, 10:27 PM
NET tab
Thanks, I always watch in console tab, with your advice, I learn a little more about firebug and the net tab.

I found my error, in my localhost test don't need google api key (and maybe the sensor), but on the online website, it's essential.

url: 'http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&key=GOOGLE_API_KEY',

Condor
12 Jan 2011, 12:19 AM
Those parameters should be in baseParams and not be part of the url.

boyquotes
12 Jan 2011, 1:46 AM
Ok Condor ;), like this:


var cityStore = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://maps.google.com/maps/geo',
method: 'GET'
}),
baseParams: { output: 'json', oe:'utf8', sensor:'false', key:'YOUR_GOOGLE_API_KEY'},
params: {q: val},
reader: new Ext.data.JsonReader({
root: 'Placemark',
fields: ['id', 'address'],
callback: function() {
combo.getValue();
}
}),
});

Thanks.

boyquotes
12 Jan 2011, 6:34 AM
I want to reach at the root "Point" ( http://maps.google.com/maps/geo?q=colorado ) to put the gps result in xtype hidden:



{xtype: 'hidden', name: 'latitude'},
{xtype: 'hidden', name: 'longitude'},



Can you use cityStore or i must created another store (with root: 'Point')?

Thanks,
Nicolas.