Is there any way to customize Google's Auto complete address result?

Question

I want to customize auto suggestion result. I want to add more two addresses at the top of the result. Is it possible using google api? for more understanding I stick here my app screen. there I am entering address. it showing predicted addresses, How can I add 2 more address at top of the result.

Answer 1

You can't do much with the Autocomplete class, at least not with any documented method. You can use the Autocomplete Service class and the getPlacePredictions method to mimic the behavior of the standard Autocomplete.

What that means is that you will have to build your own UI and behaviors, but it also gives you more flexibility to style it the way you want, and it will allow you to add your custom addresses easily.

Here is a quick example. It just adds two custom addresses on top. You will have to implement the logic behind the 2 custom addresses as currently nothing will happen when you click on them. But that's not the trickiest part, and this example shows already a lot of what you can do with it.

let autocompleteService, placesService, results, map;

function initialize() {

  results = document.getElementById('results');

  const mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 50)
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Bind listener for address search
  google.maps.event.addDomListener(document.getElementById('address'), 'input', function() {

    results.style.display = 'block';
    getPlacePredictions(document.getElementById('address').value);
  });

  // Show results when address field is focused (if not empty)
  google.maps.event.addDomListener(document.getElementById('address'), 'focus', function() {

    if (document.getElementById('address').value !== '') {

      results.style.display = 'block';
      getPlacePredictions(document.getElementById('address').value);
    }
  });

  // Hide results when click occurs out of the results and inputs
  google.maps.event.addDomListener(document, 'click', function(e) {

    if ((e.target.parentElement.className !== 'pac-container') && (e.target.parentElement.className !== 'pac-item') && (e.target.tagName !== 'INPUT')) {

      results.style.display = 'none';
    }
  });

  autocompleteService = new google.maps.places.AutocompleteService();
  placesService = new google.maps.places.PlacesService(map);
}

// Get place predictions
function getPlacePredictions(search) {

  autocompleteService.getPlacePredictions({
    input: search,
    types: ['establishment', 'geocode']
  }, callback);
}

// Get place details
function getPlaceDetails(placeId) {

  const request = {
    placeId: placeId
  };

  placesService.getDetails(request, function(place, status) {

    if (status === google.maps.places.PlacesServiceStatus.OK) {

      const center = place.geometry.location;
      const marker = new google.maps.Marker({
        position: center,
        map: map
      });

      map.setCenter(center);

      // Hide autocomplete results
      results.style.display = 'none';
    }
  });
}

// Place search callback
function callback(predictions, status) {

  // Empty results container
  results.innerHTML = '';

  // Place service status error
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    results.innerHTML = '<div class="pac-item pac-item-error">Your search returned no result. Status: ' + status + '</div>';
    return;
  }

  // Build output with custom addresses
  results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My home address</div>';
  results.innerHTML += '<div class="pac-item custom"><span class="pac-icon pac-icon-marker"></span>My work address</div>';

  // Build output for each prediction
  for (let i = 0, prediction; prediction = predictions[i]; i++) {

    // Insert output in results container
    results.innerHTML += '<div class="pac-item" data-placeid="' + prediction.place_id + '" data-name="' + prediction.terms[0].value + '"><span class="pac-icon pac-icon-marker"></span>' + prediction.description + '</div>';
  }

  const items = document.getElementsByClassName("pac-item");

  // Results items click
  for (let i = 0, item; item = items[i]; i++) {

    item.onclick = function() {

      if (this.dataset.placeid) {
        getPlaceDetails(this.dataset.placeid);
      }
    };
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

body,
html {
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
  height: 100%;
}

#map-canvas {
  height: 130px;
  margin-bottom: 10px;
}

table {
  border-collapse: collapse;
  margin-left: 20px;
}

table td {
  padding: 3px 5px;
}

label {
  display: inline-block;
  width: 160px;
  font-size: 11px;
  color: #777;
}

input {
  border: 1px solid #ccc;
  width: 170px;
  padding: 3px 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.pac-container {
  background-color: #fff;
  z-index: 1000;
  border-radius: 2px;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 350px;
}

.pac-icon {
  width: 15px;
  height: 20px;
  margin-right: 7px;
  margin-top: 6px;
  display: inline-block;
  vertical-align: top;
  background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
  background-size: 34px;
}

.pac-icon-marker {
  background-position: -1px -161px;
}

.pac-item {
  cursor: pointer;
  padding: 0 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 30px;
  vertical-align: middle;
  text-align: left;
  border-top: 1px solid #e6e6e6;
  color: #999;
}

.pac-item.custom {
  background-color: #FFF9C4;
}

.pac-item:hover {
  background-color: #efefef;
}

.pac-item-error,
.pac-item-error:hover {
  color: #aaa;
  padding: 0 5px;
  cursor: default;
  background-color: #fff;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map-canvas"></div>
<table>
  <tr>
    <td>
      <label for="address">Address:</label>
    </td>
  </tr>
  <tr>
    <td>
      <input id="address" placeholder="Enter address" type="text" tabindex="1" />
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div id="results" class="pac-container"></div>
    </td>
  </tr>
</table>

Most of the code is commented so it should speak for itself.

JSFiddle demo