フレームワーク7オートコンプリートGoogleプレイスAPI

Question

私はフレームワーク7で作成されたハイブリッドアプリケーションを持っています。私はフレームワーク7のオートプレース（framework7.io/docs/autocomplete.html）機能をGoogle place APIで実装したいのですが、これは配列から結果を表示するのではなく、多くのオプションがあるからです。私はgoogle place APIの結果を望んでいます。

どうすればいいですか？ 私は標準のGoogle places API JavaScriptを試しましたが、最適化されていません。

Answer 1

それはあなたの入力を作成して、フッターにGoogleからのAPIをロードし、簡単です：フッターに

<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

フレームワーク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）：あなたのJSファイル内

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

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