Google Maps Api AutoComplete

[tapiwa]

I want to have auto complete/suggestions appear as a user is typing in a input field. The auto complete/suggestion should be the ame as the one on maps.google.com. If there is anyone who can point me on how to do this

[Maryna Brodina]

Hello! Use REST service with URL maps.google.com/maps/suggest

and the next parameters:
q - map from Input component Input
json=b - response format
num= (for example num=5) - number of suggestions

[Rommel Paras]

Yeah, I tried implementing the code below:
code
var input = document.getElementById("keyword");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setComponentRestrictions({'country': 'us'}); //United States only for now
autocomplete.bindTo('bounds', map);
autocomplete.setTypes(['establishment']);
google.maps.event.addListener(autocomplete, "place_changed", function(){
var marker2 = new google.maps.Marker({map: map});
show_map(autocomplete, marker2, input);
});
/code

but it looks like it's currently not supported (see error: http://prntscr.com/1cczo3).

Is there a way for me to use autocomplete instead of the REST service? The primary limitation with the rest service is being unable specify the country restriction (or maybe I just don't know what are the other available parameters and I can't find the resource page).

[Rommel Paras]

There are limitations to this method.

1. The programmer would need to use jqueryui.autocomplete or jquery.autocomplete libraries to propagate an array of suggestions to a textbox.

2. The text suggestions that show up under a textbox when you type don't display as quickly and as efficiently as maps.Autocomplete.

3. The programmer would need to parse the id of the selection if he/she wants to plot that location as a marker in the map.

   If the purpose of the programmer is to show a textbox with autocomplete selections of places, locations, etc., all these steps can be avoided by using maps.Autocomplete as shown below.

[Rommel Paras]

I found the answer to my question. I just had to copy the contents of this file:
http://maps.googleapis.com/maps/api/j...

However, this introduces problems of its own: see http://prntscr.com/1civr4

1. It loads the maps JS twice.

2. It causes null values since the script is always running.

   Is there a way for me to use Autocomplete without all these issues??

[Illya Stepanov]

Sorry for delay. We will look for a solution it will take some time.

[Kateryna Grynko]

Hello,

To make the code here https://getsatisfaction.com/apperyio/... work drag to your page Panel component with the following code:
code<script type="text&#47;javascript" src="http:&#47;&#47;maps&#46;googleapis&#46;com&#47;maps&#47;api&#47;js?libraries=places&sensor=false"><&#47;script>/code
Then access the component correctly. On Page Show or Page Load event (define map variable for this event) you would need to correct Input component get method:
codevar input = Appery( "autocomplete_input_NAME" )&#46;get(0);/code

[Rommel Paras]

When I directly access the map on
http://appery.io/app/view/b7685864-bd... [1],
it works fine.

However, when I first to
http://appery.io/app/view/b7685864-bd...,
and click 'The Field' tab to go to the screen where the map is [1], the search autocomplete at the top doesn't work and I'm getting these error messages: http://prntscr.com/1dh4ft

[Kateryna Grynko]

Hi Rommel,

You connect Google scripts using the following code in Panel component:
code<script type="text&#47;javascript" src="http:&#47;&#47;maps&#46;googleapis&#46;com&#47;maps&#47;api&#47;js?libraries=places&sensor=false"><&#47;script>/code
If you connect on several pages it causes an error. I would advice you not to use Panel, but include your code once in App settings - External resources.

[Rommel Paras]

I removed the JavaScript code from the 2 panels and added them as external resources. However, the error still persists:
http://prntscr.com/1dl16j

Could it be because I'm re-adding the full maps+autocomplete js instead of just the autocomplete?

Is there a workaround this where autocomplete is supported by Appery.io by default?