Google Maps Api AutoComplete
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
Catch up wih the Appery.io community on our forum. Here you'll find information on the lastest questions and issues Appery.io developers are discussing.
https://forum.appery.io/
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
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
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).
There are limitations to this method.
The programmer would need to use jqueryui.autocomplete or jquery.autocomplete libraries to propagate an array of suggestions to a textbox.
The text suggestions that show up under a textbox when you type don't display as quickly and as efficiently as maps.Autocomplete.
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.
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
It loads the maps JS twice.
It causes null values since the script is always running.
Is there a way for me to use Autocomplete without all these issues??
Sorry for delay. We will look for a solution it will take some time.
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/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></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" ).get(0);/code
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
Hi Rommel,
You connect Google scripts using the following code in Panel component:
code<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></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.
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?