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.

var autocompleteService, placesService, results, map;

function initialize() {

  results = document.getElementById('results');

  var 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) {

  var request = {
    placeId: placeId
  };

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

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

      var center = place.geometry.location;
      var 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 (var 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>';
  }

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

  // Results items click
  for (var 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

Answer 2

In case anyone needs to move through the results with arrow keys, I've written something like this in addition to the example provided by MrUpsidown.

Functions nextAll and prevAll can be probably simplified to next and prev, but I had to use these as I have some dividing elements of different classes (than .pac-item) in the results.

// move through options on key down or up
$(input).keydown(function(e) {
      switch (e.which) {
        case 40: // move down
          e.preventDefault(); // prevent moving the cursor
          if(document.querySelector('.pac-item-selected') == null)
              $('.pac-item').first().addClass('pac-item-selected');
          else {
              var i = $('.pac-item:not(:last-child).pac-item-selected').nextAll('.pac-item');
              if(i.length > 0){
                  $('.pac-item:not(:last-child).pac-item-selected').removeClass('pac-item-selected');
                  i[0].classList.add('pac-item-selected');
              }
          }
          break;
        case 38: // move up
          e.preventDefault(); // prevent moving the cursor
          var i = $('.pac-item:not(:first-child).pac-item-selected').prevAll('.pac-item');
          if(i.length > 0){
              $('.pac-item:not(:first-child).pac-item-selected').removeClass('pac-item-selected');
              i[0].classList.add('pac-item-selected');
          }
          break;
        case 13: // submit when enter is pressed
            e.preventDefault();
            if(document.querySelector('.pac-item-selected') == null)
                $('.pac-item').first().click();
            else
                $('.pac-item-selected').click();
            break;
      }
});

$(document).on({ // remove selected class on hover
    mouseenter: function () {
        $('.pac-item-selected').removeClass('pac-item-selected');
    }
}, ".pac-item");