framework7 автозаполнение google places api

Question

У меня есть гибридное приложение, созданное с помощью рамки7. Я хочу реализовать функцию autocomplete (framework7.io/docs/autocomplete.html) framework7 с API google places, потому что у него есть много вариантов, вместо того, чтобы показывать результаты из массива. Мне нужны результаты API google places.

Как я могу это сделать? Я пробовал стандартный javascript API google places, но он не оптимизирован.

Answer 1

Это просто, создать свой вход и загрузить API от Google в сноске:

<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> 

В сноске:

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

И создать свою initMap функцию:

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() {}); 
} 

Результат:

Answer 2

Framework 7 HTML элементы:

<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> 

в сноске (включает в себя обратный вызов = initAutocomplete):

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

в файле JS (OnLoad, document.ready и т.д.)

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 ********* 
    }); 
}