Automatically disable or postpone Google Places API autoloaders

Google Places API Web Service has a limit of 1000 requests per day for non-accounting accounts. When using the auto-scare feature of the search box, which contains multiple locations for each keystroke, this limit will be reached rather quickly.

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div style="height:100%; width:100%;position:absolute;">
<div id="map"></div>
</div>
<script>
  window.onload = initAutocomplete;
  function initAutocomplete() {

            var my_position = new google.maps.LatLng(51.163375, 10.447683);
            var map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 51.163375, lng: 10.447683},
              disableDoubleClickZoom: true,
              zoom: 9,
              mapTypeId: 'roadmap'
            });

            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');

            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map viewport.
            map.addListener('bounds_changed', function() {
              searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            var crowdMarker = new google.maps.Marker({
              position: my_position,
              map: map
            });
            google.maps.event.addListener(map, 'dblclick', function(e){
              var positionDoubleClick = e.latLng;
              crowdMarker.setPosition(positionDoubleClick);
              var lat = crowdMarker.getPosition().lat();
              var lng = crowdMarker.getPosition().lng();
            });
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.

            google.maps.event.addDomListener(searchBox, 'keydown', function (e) {
              if (e.keyCode == 13) {
                  e.preventDefault();
              }
          });
            searchBox.addListener('places_changed', function() {
              var places = searchBox.getPlaces();

              if (places.length == 0) {
                return;
              }

              // Clear out the old markers.
              markers.forEach(function(marker) {
                marker.setMap(null);
              });
              markers = [];

              // For each place, get the icon, name and location.
              var bounds = new google.maps.LatLngBounds();
              places.forEach(function(place) {
                if (!place.geometry) {
                  console.log("Returned place contains no geometry");
                  return;
                }
                var icon = {
                  url: place.icon,
                  size: new google.maps.Size(71, 71),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(17, 34),
                  scaledSize: new google.maps.Size(25, 25)
                };

                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                  map: map,
                  icon: icon,
                  title: place.name,
                  position: place.geometry.location
                }));

                if (place.geometry.viewport) {
                  // Only geocodes have viewport.
                  bounds.union(place.geometry.viewport);
                } else {
                  bounds.extend(place.geometry.location);
                }
              });
              map.fitBounds(bounds);
            });
          }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPIKey&libraries=places"
    async defer></script>

      

Things I've tried include setting a binding to the SearchBox to restrict suggestions to a given scope, as well as adding a delay in the keydown section.

Can anyone suggest a way of throttling or delaying auto-completion appearing and therefore sending fewer requests?

+3


source to share


1 answer


I'm afraid the current implementation of autocomplete and search in the library of places in the Maps JavaScript API does not allow for programmatic processing or deferring requests. You can see the feature request in google issue tracking:

https://issuetracker.google.com/issues/35823678



Please tick this feature request to add your vote. The only workaround I can think of is to implement your own autocomplete element that uses the class google.maps.places.AutocompleteService

and where you can control the frequency of requests sent to AutocompleteService

.

https://developers.google.com/maps/documentation/javascript/reference#AutocompleteService

+1


source







All Articles