コルドバGoogleマッププラグインを使用すると、私はイオン+コルドバを使用してアプリケーションを構築しようとしています一緒に

Question

を場所APIをグーグル。私は私のアプリで地図を表示したい。 私はこのためにコードバgoogle mapsプラグインを使用しており、マップを正常にレンダリングすることができます。 私がしたいことは、地図の上に検索ボックスを置くことです。検索では、ユーザーが入力を開始したときにユーザーの現在地の近くに場所候補が表示されます。

私はマップの上に検索ボックスを追加するには、以下のコードを使用します。私のコントローラで

<div style="width:100%;height:400px" id="map_canvas"> 
    <div id="searchBox"> 
     <input type="text" id="query" size="30" />    
    </div> 
</div> 

、私が使用するGoogleは、ユーザーの現在位置に近い場所のリストを取得するために、オートコンプリートサービスを配置します。入力を開始すると、ドロップダウンの場所の一覧が表示されます。

var input = document.getElementById('query'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 

ただし、ドロップダウンリストからオプションを選択することはできません。バックグラウンドで地図を移動し続けます。

は私が

map.setClickable(false) 

しかし、固定マップを作ること以下のプロパティを設定してみました。私は地図を修正したいとは思わないし、ユーザーが望むならマップを動かすことができるはずです。

私はまた、マップにドロップダウンで選択した場所に渡したいです。この情報を使って地図にマーカーを追加したいと思います。私はこれを働かせるために苦労しています。

は、誰もがこの作業を取得することができていますか？はいの場合は、ポインタやサンプルコードを参考にしてください。

注：私はGoogleマップAPI +場所APIをGoogleに使用している場合、それは動作させることができています。 Googleマッププラグインを使用したいのですが、GoogleマップAPIを直接使用した場合と比べてパフォーマンスが向上しています。

よろしく

Answer 1

あなたはそれをこのように（私はjQueryのを使用）行うことができます。

$("#query").on("blur", function() { 
      map.setClickable(true); 
     }).on("focus", function() { 
      map.setClickable(false); 
     }).on("keyup", function() { 
      event.stopPropagation(); 
      event.preventDefault(); 
      // searching 
     }); 

もう一つのポイント：マッププラグインは、ジオコーディングをサポートし、ドキュメントを見て：https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Geocoder

Answer 2

を使用プラグインを使用している場合は、結果が視覚的に予測できない結果になる可能性があるため、在庫のGoogle自動補完は問題です。

私はオートコンプリートサービスを使用していることを発見し、容易なことなどを解析し、すべてのドロップダウンの結果を処理します。イオンで

は、あなたがhttps://github.com/israelidanny/ion-google-place のようなプラグインを使用するか、私は偉大であることが判明したプラグインがありcodepen

のサンプルコードを持っているhttp://devfanaticblog.com/google-places-autocomplete-with-ionic-framework/を見て、私はそれへのリンクを見つけることができないことができます。