Quota for Google Places API Autocomplete - google-maps

Question

I a using Google Places API Web Service, Google Maps Directions API for a project where I am using Google Place Autocomplete for my search query. As of I know, I am supposed to get 2500 requests per day. The project is in testing mode. I am sure I have not searched that limit, but still, I am getting a console error You have exceeded your daily request quota for this API.
I am unable to figure out. Can anyone please help me on this issue.
Thanks in advance.
I have added in footer
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=WeddinginitMap">
</script>
And my script is:
<script>
//Direction Grand Cruise
function initDirection() {
var $directionMap = $('[ data-directionMap ]');
$.each($directionMap, function( index, element){
var $dirEle = $(element);
var that = $(this);
var $id = $dirEle.get(0).id;
var $start = $dirEle.closest('.modal-content').find('.start-move').get(0).id;
var $end = $dirEle.closest('.modal-content').find('.end-move').get(0).id;
//console.log($end);
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map($('#'+$id)[0] , {
zoom: 18,
center: {lat: 22.560941, lng: 88.354062}
});
var input = $('#'+$start)[0];
var autocomplete = new google.maps.places.Autocomplete(input);
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
$('#'+$start)[0].addEventListener('change', onChangeHandler);
$('#'+$end)[0].addEventListener('change', onChangeHandler);
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: $('#'+$start)[0].value,
destination: $('#'+$end)[0].value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
};
});//end $.each
};// initDirection
</script>
<script>
function WeddinginitMap() {
var $locationSelector = $('.map-wrapper').find('.location-map[ data-map ]');
$.each( $locationSelector, function( index, element ){
var $ele = $(element);
var $this = $(this);
var $mapId = $ele.get(0).id;
var $lat = parseFloat( $('#'+$mapId).data('lat') );
var $long = parseFloat($('#'+$mapId).data('longi'));
var $zoom = parseFloat( $('#'+$mapId).data('zoom') );
console.log($mapId);
console.log($lat);
console.log($long);
console.log($zoom);
var uluru = {lat: $lat, lng: $long };
var $map = $('#'+$mapId)[0];
var map = new google.maps.Map($map, {
zoom: $zoom,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon:'assets/img/svg/vivada-ico.svg'
});
});//$.each
initDirection();
};
</script>
<script>
function initializeGoogletMapinsideModal(){
$('.map-modal ').on('shown.bs.modal', function (e) {
WeddinginitMap();
initDirection();
});
};
initializeGoogletMapinsideModal();
function redirectToDirectionModal(){
var $closeModal = $('.close-modal');
$.each( $closeModal, function(index, element ){
var $elem = $(element);
$elem.on('click', function(){
var $MainModal = $elem.closest('.map-modal');
var $targetDirectionModal = $elem.attr('data-target-modal');
$MainModal.modal('hide');
$($targetDirectionModal).modal('show');
$($targetDirectionModal).on('shown.bs.modal', function(e){
initDirection();
});
});//click
});//$.each
};
redirectToDirectionModal()
</script>

Answer 1

Places API has 1000 daily requests by default
https://developers.google.com/places/web-service/usage
You should be aware that each time when you are typing a new symbol in the autocomplete you are sending a new request. So it is quite easy to exceed 1000 quota using autocomplete element.
You can enable Billing in your project in order to get 150K daily requests for Places API free of charge.
Hope this helps!
Update
Please note that Google changes the behavior starting from June 11, 2018. They migrate to Google Maps Platform.
https://cloud.google.com/maps-platform/user-guide/product-changes/

Answer 2

From my observation, I did not see any usage from my dashboard
I played around the autocomplete list in the search box many times, but I still get no usage record. The quota counts only when one of the place options is selected. I searched through the document and API doc, there is no explanation on how exactly the autocomplete feature is counted. However, I do not agree that it counts as a new request every time user types in a single character. If it does, the quota (1000 per day) will be used up in few minutes and usage will reach the cap easily. Most apps cannot survive.
I would say the autocomplete is counted only when one of the items is picked.