View Full Version : Google autocomplete places example ?

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

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?

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

26 Feb 2012, 11:02 PM
ok i have changed the url now

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,
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

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

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

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:

However, when the URL is sent, extjs jsonp attached that URL with more parameters:

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 ?

2 Apr 2012, 8:15 AM

Have you found any solution ????

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

There's a typo in my previous post where the request should be :

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 ?

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 (:|

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

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:

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

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

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.