PDA

View Full Version : Google autocomplete places example ?



chot2
25 Feb 2012, 2:17 AM
Hello Everyone ,

I have a requirement just like google auto complete places . I found a example which is similar to that
http://dev.sencha.com/deploy/ext-4.0.0/examples/form/forum-search.html

In the above example http://www.sencha.com/forum/showthread.php returns a JSON object which can be seen .

I am trying to modify the url with my goggle map key as suggested here http://code.google.com/apis/maps/documentation/places/autocomplete.html

But I am getting request denied error . Can some one please help me . Is there any better example other than this?

mitchellsimoens
25 Feb 2012, 8:07 AM
Google is saying that your request is denied? Is the request valid for the google service?

chot2
26 Feb 2012, 11:02 PM
ok i have changed the url now
Ext.onReady(function(){

Ext.define("Post", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'http://maps.googleapis.com/maps/api/geocode/json?address=Hyderabad,+&sensor=false',

reader: {
type: 'json',
root: 'results'
//totalProperty: 'totalCount'
}
},

fields: [
{name: 'id', mapping: 'long_name'},
{name: 'title', mapping: 'short_name'},
{name: 'topicId', mapping: 'types'}
]});

ds = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'Post'
});

panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search the Ext Forums',
width: 600,
bodyPadding: 10,
layout: 'anchor',

items: [{
xtype: 'combo',
store: ds,
displayField: 'title',
typeAhead: false,
hideLabel: true,
hideTrigger:true,
anchor: '100%',

listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',

// Custom rendering template for each item
getInnerTpl: function() {
return '<a class="search-item" href="http://maps.googleapis.com/maps/api/geocode/json?address=Hyderabad,+&sensor=false">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' ;


}
},
pageSize: 10
}, {
xtype: 'component',
style: 'margin-top:10px',
html: 'Live search requires a minimum of 4 characters.'
}]
});
});


Now I m getting invalid lable results

chot2
27 Feb 2012, 5:54 PM
any suggestions ? :-/

chot2
9 Mar 2012, 1:29 AM
any other ideas ?

mrmaoii
28 Mar 2012, 7:47 PM
I tried the similar coding.

The API I used is for Google Places API though.
The accepted URL by Google is something like this:
https://maps.googleapis.com/maps/api/place/search/json?input=australia&sensor=false&key=xxx

However, when the URL is sent, extjs jsonp attached that URL with more parameters:
https://maps.googleapis.com/maps/api/place/search/json?input=australia&sensor=false&key=xxx&_dc=1332938107714&query=test&page=1&start=0&limit=10&callback=Ext.data.JsonP.callback1

Google returned 200OK with "Status: Invalid Request".
I believed Google doesn't allow that URL with extra parameters.

Is there any workaround to disable the default attachment of the extra parameters by the jsonp ?
or perhaps another URL request method is needed ?

chot2
2 Apr 2012, 8:15 AM
@mrmaoii

Have you found any solution ????

mrmaoii
3 Apr 2012, 8:38 PM
@chot2: still working on it...

There's a typo in my previous post where the request should be :
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=australia&sensor=false&key=xxx

Now I'm getting the similar "invalid label" error in FireFox or an "expecting ';' " error in IE.

Is there a specific data format that jsonp is expecting ?

chot2
3 Apr 2012, 9:11 PM
Even i m not sure about that . It would be better if some who have already implemented it would tell us (:|

mitchellsimoens
4 Apr 2012, 4:29 AM
Does it support JSONP?

mrmaoii
8 Apr 2012, 8:33 AM
According to the site: https://developers.google.com/maps/documentation/places/autocomplete :
It's a Web service that returns Place information based on text search terms.

The request is an HTTP URL of the following form:
https://maps.googleapis.com/maps/api/place/autocomplete/output?parameters


It's able to return the data in json format.
Does it mean it supported jsonp ?

mitchellsimoens
9 Apr 2012, 4:05 AM
I don't see a callback parameter that it can accept. You may have to create a server proxy to do JSONP

priyankgandhi
24 Jan 2013, 9:03 PM
Here is a tutorial i created few days back in case if it helps. Google maps v3 api takes care of handling json response so you dont need to worry about it.

http://webtrouble.blogspot.com/2013/01/google-address-autocomplete.html