framework7 autocomplete google places api

Question

I have an hybrid application created with framework7. I want to implement the autocomplete (framework7.io/docs/autocomplete.html) feature of framework7 with google places API, because it has many options, instead of showing the results from an array. I want the results of google places API.

How can I do it? I tried the standard google places API javascript, but it is not optimized.

Answer 1

It's easy, create your input and load the API from google in the footer:

<div class="item-content ad-address-holder">
        <div class="item-inner">
            <div class="item-input">
                <input class="address-text" id="address-text" placeholder="Enter a location" type="text">
            </div>
        </div>
</div>

In footer:

<script defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR-API-KEY-HERE]&callback=initMap&libraries=places" type="text/javascript"></script>

And create your initMap function:

window.initMap = function() {
  var acInputs = document.getElementById("address-input");
  var autocomplete = new google.maps.places.Autocomplete(acInputs);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {});
}

Result:

Answer 2

Framework 7 html elements:

 <form data-search-list=".list-block-search" data-search-in=".item-title" class="searchbar searchbar-init">
    <div class="searchbar-input">
       <input id="pac-input" class="controls address-text" type="search" placeholder="add city">
    </div><a href="#" class="searchbar-cancel">Cancel</a>
 </form>

in footer (includes callback=initAutocomplete):

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]&libraries=places&callback=initAutocomplete"></script>

in your JS file (onLoad, document.ready, etc)

function initAutocomplete() {
     // 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);
     // Listen for the event fired when the user selects a prediction and retrieve
     // more details for that place.
     searchBox.addListener('places_changed', function() {
        var places = searchBox.getPlaces();
        ************ YOUR LOGIC WITH THE SELECTED PLACES *********
     });
 }

Answer 3

You have to bind input box with AutoComplete class of Google place widgets in pageInit event of Framework7.

<input id="pac-input" type="text" placeholder="Enter a location">

In JavaScript Code:-

var app = new Framework7({
  on: {
    pageInit: function () {
      var input = document.getElementById('pac-input');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('places_changed', function() {
         var places = autocomplete.getPlaces();
         ************ Implement your Logic here *********
      });
    }
  }
})