As you know every time when we type the google map autoComplete will fire, I want to set a delay function for this, such as 250ms,so give user more time to type and also save the credits. I try to add $timeout, but looks like it didn't work for me. Would you please take look at this for me? Thanks advance.
Html:
<input name="google_places_ac" type="text" class="google_places_ac input-block-level" ng-model="address" placeholder="Please enter a location" ng-blur="updateMap()"/>
directive:
link: function($scope, elm, attrs) {
$timeout(function(){
var autocomplete = new google.maps.places.Autocomplete($(elm).find(".google_places_ac")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
$scope.address = place.formatted_address;
$scope.location = {
formatted_address: place.formatted_address,
loglat: place.geometry.location
};
$scope.$apply();
//pop up the event and index(if needed)
$scope.$emit('updatemap',$scope.indexposition);
});
},1000);
}
every time I try to type in the search input, it will immediately popup the search result list, is there way I can delay it? so user can type more characters?
Currently you cannot control the frequency of places prediction requests of Autocomplete element via Maps JavaScript API.
However, there is a feature request in the public issue tracker:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5831
Google marked this feature request as Accepted. I can suggest starring this feature request to show your interest and get further updates from Google.
You can do a conditional with a timeout to handle this
if(!$scope.isDelayed){
$scope.isDelayed = true;
$timeout(function(){
//call google maps api
$scope.isDelayed = false;
}, 2500)
}
in this way you will call every 2500 ms, in your previous code it will always be executed, you are just delaying the execution, but try this out.
I am checking for the first a-z character to be inputted before I search... seems to save some element lookup. At least it gets to some relevant return data from the start. Please note that this will start displaying results on the next input value after the alpha character. You may want to use the blank space/white space as the trigger instead (like this... .value.match(/\s/)).
Also, you may want to use Options to specify ComponentRestrictions or Bounds. here is a link to documentation. https://developers.google.com/maps/documentation/javascript/places-autocomplete
$scope.getDestinationLocation = function () {
if (document.getElementById("daddress1").value.match(/[a-z]/i)) {
var options = {
types: ['address'],
componentRestrictions: { country: "us" }
};
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById("daddress1")),
options);
autocomplete.addListener('place_changed', $.proxy(function () {
var place = autocomplete.getPlace();
....
If you're using Angularjs, you can try this:
ng-model-options="{ debounce: 200 }"
Where 200 - delay in ms
My code for autocomplete fields looks like:
<input g-places-autocomplete
force-selection="true"
enter="home.doSearch()"
type="text"
class="form-control"
id="searchAddress"
ng-model="home.searchAddress"
name="searchAddress"
options="home.autocompleteOptions"
ng-model-options="{ debounce: 1500 }"
autocomplete="off"
placeholder="{{ 'YOUR_ROADTRIP_BEGINS' | translate }}"
ng-keyup="home.checkForEnterButton($event)"
>
