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