Geosearch via GooglePlaces Autocomplete: Start requests after X chars

Solution 1:

What you are looking for can be done, but you'll need to use the Autocomplete Service [1] instead of the Autocomplete widget [2]. Here is an example that waits until the fifth character is entered to make a request, and then makes one after each 2 additional characters. The number of characters can be edited at the line "edit params here". You need to insert your own API key. A similar example is at https://codepen.io/ecglover8/pen/ExPqdNd that does every 3 characters.

Since you won't be using the Autocomplete widget, you'll need to handle session tokens [3] yourself (not shown). From a price standpoint, whether you'll need tokens or not depends on exactly how you plan to use the predictions [4]. This example actually makes a geocoding API request using the Place ID from the prediction and displays the lat/long.

[1] https://developers.google.com/maps/documentation/javascript/places-autocomplete#place_autocomplete_service

[2] https://developers.google.com/maps/documentation/javascript/places-autocomplete#add-autocomplete

[3] https://developers.google.com/maps/documentation/javascript/places-autocomplete#session_tokens

[4] https://developers.google.com/maps/documentation/places/web-service/usage-and-billing#ac-per-request

//declare constants
const ac = document.getElementById("ac");
const g = document.getElementById("geocoded");
const results = document.getElementById("results");

//listen for typing into input box
ac.addEventListener("input", ACRequest);

//show resulting predictions 
const displayPredictions = function(predictions, status) {
  results.innerHTML = "";
  g.innerHTML = "";
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  predictions.forEach(prediction => {
    let li = document.createElement("li");
    li.appendChild(document.createTextNode(prediction.description));
    li.dataset.placeid = prediction.place_id;
    li.addEventListener("click", Geo)
    results.appendChild(li);
  });
  let img = document.createElement("img");
  img.setAttribute("src", "https://developers.google.com/maps/documentation/images/powered_by_google_on_white.png");
  results.appendChild(img);
};

//make autocomplete request if input value length divisible by 3
function ACRequest() {
  //edit params here
  if ((ac.value.length > 4) && (ac.value.length % 2 == 1)) {
    const service = new google.maps.places.AutocompleteService();
    service.getPlacePredictions(
      {
        //here is where you can add bounds, componentrestrictions, types, etc
        input: ac.value
      }, displayPredictions
    )
  };
};
function Geo() {
  console.log(this.getAttribute("data-placeid"));
  const geocoder = new google.maps.Geocoder();
  geocoder.geocode(
    {
      "placeId": this.getAttribute("data-placeid")
    }, function(address, status) {
      if (status == "OK") {
        g.innerHTML = address[0].geometry.location
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
}

li {
  border: 2px solid blue;
  list-style: none;
  margin: 2px;
  padding: 2px;
}
li:hover {
  border: 2px solid red;
}
.pac-card {
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  margin: 10px 10px 0 0;
  outline: none;
}
.title {
  background-color: #4D90FE;
  color: #FFFFFF;
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0px;
  padding: 6px 12px;
}

<div class="pac-card">
  <div class="title">Autocomplete Makes Requests Every Three Characters</div>
  <input id="ac" size="10" type="text" />
  <ul id="results"></ul>
  <p id="geocoded"></p>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&v=weekly" async defer></script>

Geosearch via GooglePlaces Autocomplete: Start requests after X chars

Solution 1:

Related

Recent Posts