web-dev-qa-db-ja.com

Autofill Address + Google Maps API

ユーザーにアドレスを入力できるテキストボックスを表示したい。ユーザーがアドレスを入力するときに、ユーザーが入力しようとしているアドレスの提案/予測をユーザーに提供したいと思います。この住所の関連性についても心配しています（たとえば、住所が世界中の途中の住所ではないなど）。

これは可能ですか？私はjQueryを使用しています。

jquerygoogle-mapsgeolocationgoogle-maps-api-3geocoding
22
StackOverflowNewbie

Google Places APIを使用して、住所のオートコンプリートを設定できます。住所を選択すると、address_componentsフィールドに構造化された住所データ（例：通り、都市、国）が含まれ、簡単に別のフィールドに変換できます。

以下は、短いデモです。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>
55
Maksym Kozlenko

address-suggestion、および デモ を見てください。 jQueryと Google Maps geocode APIで実装されています。

7
user471245

https://github.com/ubilabs/geocomplete が機能するはずです。必要に応じて、地図を表示することもできます。

マップを表示せずにプラグインを使用する場合は、テキストフィールドの下に「powered by Google」ロゴを表示する必要があります。

6
DreifGenov

実行中のバージョンの@Maksym Kozlenko回答これを実際に見たい方のために。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
        <script>
            var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                var place = autocomplete.getPlace();
                console.log(place.address_components);
            });
        </script>
    </body>
</html>
6
Anand Singh

APIキーを使用する必要があります。

参考文献を参照 こちら

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>

    <body>
        <input type="text" id="address" style="width: 500px;"></input>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
        <script>
            function initMap(){
                var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});

                google.maps.event.addListener(autocomplete, 'place_changed', function() {
                    var place = autocomplete.getPlace();
                    console.log(place.address_components);
                });
            }
        </script>
    </body>
</html>
2
Mihai Alexandru-Ionut