web-dev-qa-db-ja.com

Google Maps APIでオートコンプリート住所フィールドを作成するにはどうすればよいですか？

Google Maps APIとJQueryを使用して、入力するときにそこに入力された住所をオートコンプリートする[住所]フィールドが必要です。これをどのように達成できますか？

javascriptjquerygoogle-maps
44
Esteban Feldman

まあ、決して遅くないほうがいい。 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

63
alt
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;            
    });
});
5
Preet

少しドリフトしますが、ユーザーがルックアップテーブルを使用して郵便番号を入力すると、US City/StateまたはCA City/Provenceを比較的簡単に自動入力できます。

人々をあなたの意志に合わせて曲げることができるなら、あなたはそれをどのように行うことができますか：

  1. ユーザー入力：郵便（Zip）コード

    記入：州、市（州、カナダ）

  2. ユーザーが入力を開始： streetname

    あなた：自動入力

  3. 表示：許可されたアドレス番号の範囲

    ユーザー：数字を入力

できた.

人々がそれを行うのは自然なことです。

  1. ユーザーが入力：アドレス番号

    あなた：何もしない

  2. ユーザーが入力を開始：通りの名前

    You：オートフィル、国内のあらゆる通りの膨大なリストから描画

  3. ユーザー入力：都市

    あなた：自動入力

  4. ユーザーが入力：状態/証明

    You：いくつかの文字を自動入力する価値はありますか？

  5. You：オートフィル郵便（Zip）コード（可能な場合）（一部のコードは都市にまたがっているため）。

これで人々が$$$を請求する理由がわかりました。 :)

番地については、数字と番地の2つの部分があることを考慮してください。郵便番号がある場合は、利用可能な通りを絞り込むことができますが、ほとんどの人は最初に数値部分を入力します。

3
BryanH

簡単ですが、Google APIの例では、入力した場所を地図に表示する方法を詳しく説明しています。オートコンプリート機能のみの場合、次のようなことができます。

まず、Google Places API Webサービスを有効にします。 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);
}
2
Piyush P

GoogleマップAPIは既知の住所のジオコーディングには最適ですが、一般的にオートコンプリートスタイルの操作に適したデータを返します。ジオコーディングクエリの制限をすぐに使い果たすような方法でAPIにアクセスしないという課題を決して気にしないでください。

2
Wyatt Barnett

Select2のような素晴らしいライブラリがいくつかありますが、私のニーズには合いません。単純な入力テキストを使用するために、サンプルをゼロから作成しました。

私はbootstrapとJQueryのみを使用しています。それが役立つことを願っています： Example

HTML：

<div class="form-group col-md-12">
    <label for="address">Address</label>
    <input type="text" class="form-control" id="address">
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="number">number</label>
        <input type="text" class="form-control" id="number">
    </div>
    <div class="col-md-8">
        <label for="street">street</label>
        <input type="text" class="form-control" id="street">
    </div>  
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="Zip">Zip</label>
        <input type="text" class="form-control" id="Zip">
    </div>
    <div class="col-md-8">
        <label for="town">town</label>
        <input type="text" class="form-control" id="town">
    </div>  
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="department">Department</label>
        <input type="text" class="form-control" id="department">
    </div>
    <div class="col-md-4">
        <label for="region">Region</label>
        <input type="text" class="form-control" id="region">
    </div>  
    <div class="col-md-4">
        <label for="country">Country</label>
        <input type="text" class="form-control" id="country">
    </div>  
</div>

JS：

$("input#address").suggest({
    label : "Adresse complete", 
    street_number_input : {
        id : "number",
        label : "Numero de la rue"
    },
    street_name_input : {
        id : "street",
        label : "Nom de la rue"
    },
    Zip_input : {
        id : "Zip",
        label : "Code postal"
    },
    town_input : {
        id : "town",
        label : "Ville"
    },
    department_input : {
        id : "department",
        label : "Departement"
    },
    region_input : {
        id : "region",
        label : "Region"
    },
    country_input : {
        id : "country",
        label : "Pays"
    }
});
0
Yacine