google maps apiでオートコンプリートアドレスフィールドを作成するにはどうすればよいですか？

Question

Google Maps APIとJQueryを使用する私は、入力時にそこに入力されたアドレスを自動完成するアドレスフィールドを持っていたいと思います。どのようにこれを達成することができましたか？

Answer 1

GoogleマップAPI v3では、アドレスの自動補完機能が追加されました。

APIドキュメントはここにある：http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

良い例はここにある： http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

GoogleマップAPIは既知のアドレスをジオコーディングするのに最適ですが、一般にオートコンプリートスタイルの操作に適したデータを返します。ジオコーディングクエリの制限を非常に早く食いつぶすような方法でAPIにヒットしないようにしてください。

Answer 3

少し漂っていますが、ユーザーがルックアップテーブルを使用して郵便番号を入力すると、米国の市/州またはCA市/プロバンスを自動入力するのは比較的簡単です。

1. ユーザーが入力：

   はあなたが記入郵便（郵便番号）コード：状態、街ここ

   は、あなたがあなたの意志に曲がるように人々を強制することができれば、あなたがそれを行うことができる方法です（州、カナダ）

2. ユーザーが入力を開始します。 streetname

   あなたは：あなたが表示さオートフィル

3. ：許可アドレス番号の範囲

   ユーザー：は数

   完了

に入ります。ここで

は、人々がそれを行うのが自然である方法は次のとおりです。

1. ユーザーは入る：アドレス数

   ます：を何

2. ユーザーが入力を開始します：通り名

   あなた：オートフィル、国のすべての通りの膨大なリストから描画

3. ユーザーは入る：市

   あなたは：オートフィル

4. ユーザーが入力：状態を/プロバンス

   あなた：はそれですwortいくつかの文字を自動入力しますか？

5. お客様：自動郵便（ジップ）コード、可能であれば（いくつかのコードが跨っているため）人々はこれを行うには$$$充電理由

---

は今、あなたは知っています。 :)

住所の場合、数字と通りの2つの部分があると考えてください。あなたが郵便番号を持っているなら、利用可能な通りを絞り込むことができますが、ほとんどの人は数字の部分を最初に入力します。これはバックワーです。

Answer 4

Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically. 
Using Google APIs. 
------------------------------------------------ 
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
<script type="text/javascript"> 
google.maps.event.addDomListener(window, 'load', function() { 
    var places = new google.maps.places.Autocomplete(document 
      .getElementById('txtPlaces')); 
    google.maps.event.addListener(places, 'place_changed', function() { 
     var place = places.getPlace(); 
     var address = place.formatted_address; 
     var value = address.split(","); 
     count=value.length; 
     country=value[count-1]; 
     state=value[count-2]; 
     city=value[count-3]; 
     var z=state.split(" "); 
     document.getElementById("selCountry").text = country; 
     var i =z.length; 
     document.getElementById("pstate").value = z[1]; 
     if(i>2) 
     document.getElementById("pzcode").value = z[2]; 
     document.getElementById("pCity").value = city; 
     var latitude = place.geometry.location.lat(); 
     var longitude = place.geometry.location.lng(); 
     var mesg = address; 
     document.getElementById("txtPlaces").value = mesg; 
     var lati = latitude; 
     document.getElementById("plati").value = lati; 
     var longi = longitude; 
     document.getElementById("plongi").value = longi;    
    }); 
}); 

Answer 5

あり、このようなSELECT2などいくつかの素晴らしいライブラリがありますが、それは私の必要性と一致していません。 単純な入力テキストを使用するために、最初からサンプルを作成しました。

私はブートストラップとJQueryのみを使用します。

は、それは簡単ですが、GoogleのAPIの例はあなたがマップが入力した場所を表示するために得ることができる方法と詳細な説明を与えることが便利

`https://jsfiddle.net/yacmed/yp0xmdf5/` 

Answer 6

なります願っています。オートコンプリート機能の場合のみ、このようなことができます。

まず、GoogleプレイスAPIウェブサービスを有効にします。 APIキーを取得します。 htmlファイル内のscriptタグでそれを使用する必要があります。

<input type="text" id="location"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script> 
<script src="javascripts/scripts.js"></scripts> 

オートコンプリートクラスを読み込むためにスクリプトファイルを使用します。 scripts.jsファイルは次のようになります。

// scripts.js custom js file 
$(document).ready(function() { 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

function initialize() { 
    var input = document.getElementById('location'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
}