Google maps AutocompleteService with JQuery UI autocomplete widget

https://jqueryui.com/autocomplete/

by nicolas tenorio

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsTmAbnQDQXRM0OZAIdPHVlCLgZe83xdc&amp;libraries=places"></script>
<div class="ui-widget">
  <label for="search">Search: </label>
  <input id="search">
</div>

JavaScript

$(function() {
   $("#search").autocomplete({
     source: function(request, response) {
       var service = new google.maps.places.AutocompleteService();
       service.getQueryPredictions({
         input: request.term,
       }, function(predictions, status) {
         if (status != google.maps.places.PlacesServiceStatus.OK) {
           alert(status);
           return;
         }
         response($.map(predictions, function(prediction, i) {
           return {
             // city (country)
             label: prediction.terms[0].value + " (" + prediction.terms[1].value + ")",
             value: prediction.description
           }
         }));
       });
     },
   });
 });