web-dev-qa-db-ja.com

Googleプレイスのオートコンプリートフォースセレクション

私はJavaScriptを使用していますGoogleはオートコンプリートAPIv3を配置します。正常に動作しますが、オートコンプリートからの選択を強制する方法があるかどうか疑問に思いました。つまり、自由形式のテキストを受け入れない入力です。ドキュメントを調べたところ、そのようなオプションは見つかりませんでしたが、安全を確保するためだけにお願いしたいと思いました。 JavaScriptを使用してそれを行う方法を見つけることができると確信していますが、使用可能な場合は、すでに構築されているメソッドを使用することをお勧めします。ありがとう！

javascriptajaxgoogle-places-api
20
TheMethod

Google Places APIは現在、この機能をサポートしていません。これが便利な機能であると思われる場合は、 Places API-機能リクエスト を送信してください。

8
Chris Green

実際、私たちが行ったことは次のとおりです。
-オートコンプリートリストから場所が選択されるたびに、いくつかの非表示フィールドにJSON応答からのフィールド（都市​​名、国名、経度、緯度）が入力されます。
-フォームが送信されると、これらのフィールドに値があるかどうかが確認されます。値がない場合は、ユーザーがリストから場所を選択する代わりに、自分で値を入力したことを意味します。

JSの方法で問題を解決しているわけではありませんが、それでもうまくいきます。

16
Iraklis
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"
    type="text/javascript"></script>
<script>
    var IsplaceChange = false;
    $(document).ready(function () {            
        var input = document.getElementById('txtlocation');
        var autocomplete = new google.maps.places.Autocomplete(input, { types: ['(cities)'] });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();

            IsplaceChange = true;
        });

        $("#txtlocation").keydown(function () {
            IsplaceChange = false;
        });

        $("#btnsubmit").click(function () {

            if (IsplaceChange == false) {
                $("#txtlocation").val('');
                alert("please Enter valid location");
            }
            else {
                alert($("#txtlocation").val());
            }

        });
    });
</script>




9
Digvijaysinh Zala

次の解決策は私のためにトリックをしました（jQueryを使って）。入力がフォーカスを失ったら、blur()イベントを使用して、最後に選択されたアドレスを強制するという考え方です。

blurイベントとplace_changedイベントの間の競合を防ぐためにタイムアウトを追加します。

次のhtmlを検討してください。

<input type="text" placeholder="Your address" id="autocomplete">

そして次のjavascript：

var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),
    {types: ['geocode']});
autocomplete.addListener('place_changed', fillInAddress);

var currentAddress = {
    line_1: "",
    line_2: "",
    zipcode: "",
    city: "",
    country: "",
    lat: "",
    lng: "",
    one_liner: ""
};

function fillInAddress() {
    var place = this.autocomplete.getPlace();
    // reset the address
    currentAddress = {
        line_1: "",
        line_2: "",
        zipcode: "",
        city: "",
        country: "",
        lat: "",
        lng: "",
        one_liner: place.formatted_address
    };
    // store relevant info in currentAddress
    var results = place.address_components.reduce(function(prev, current) {
        prev[current.types[0]] = current['long_name'];
        return prev;
    }, {})
    if (results.hasOwnProperty('route')) {
        currentAddress.line_1 = results.route;
    }
    if (results.hasOwnProperty('street_number')) {
        currentAddress.line_1 = results.street_number + " " + currentAddress.line_1;
    }
    if (results.hasOwnProperty('postal_code')) {
        currentAddress.zipcode = results.postal_code;
    }
    if (results.hasOwnProperty('locality')) {
        currentAddress.city = results.locality;
    }
    if (results.hasOwnProperty('country')) {
        currentAddress.country = results.country;
    }
    currentAddress.lat = Number(place.geometry.location.lat()).toFixed(6);
    currentAddress.lng = Number(place.geometry.location.lng()).toFixed(6);
}

$('#autocomplete').blur(function() {
    var address = $('#autocomplete').val();
    // we set a timeout to prevent conflicts between blur and place_changed events
    var timeout = setTimeout(function() {
        // release timeout
        clearTimeout(timeout);
        if (address !== currentAddress.one_liner) {
            $('#autocomplete').val(currentAddress.one_liner);
        }
    }, 500);
});

これがお役に立てば幸いです。

2
Charlesthk

見つかったこのコードを使用して問題を解決しました ここ

<asp:TextBox runat="server" ID="TextBox1" />
<input type="button" id="btnSubmit" name="name" value="Validate" />
<div id="dvMap">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBE1J5Pe_GZXBR_x9TXOv6TU5vtCSmEPW4"></script>
<script type="text/javascript">
    var isPlaceChanged = false;
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('<%= TextBox1.ClientID %>'));
        google.maps.event.addListener(places, 'place_changed', function () {
            isPlaceChanged = true;
            var geocoder = new google.maps.Geocoder();
            var place = places.getPlace();
            var address = place.formatted_address;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    var mapOptions = { center: new google.maps.LatLng(latitude, longitude), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
                    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                    var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map });

                } else {
                    alert("Request failed.")
                }
            });
        });
    });
    $(function () {
        $("#TextBox1").keydown(function () {
            isPlaceChanged = false;
        });

        $("#btnSubmit").click(function () {
            if (!isPlaceChanged) {
                $("#TextBox1").val('');
                alert("Please Enter valid location");
            }
            else {
                alert($("#TextBox1").val());
            }
        });
    });
</script>
0
Amit Shah

入力パターンタグを使用して、ユーザーにGoogleオートコンプリートAPIに基づく事前決定を選択させることができます。

入力：

    <form>
         <input type="text" onkeyup="changePatterns()" onchange="changePatterns()" id="autocomplete" required pattern="">
         <input type="submit">
    </form>

JSファイル：

function changePatterns() {
    let input = document.getElementById('autocomplete').value;
    let regExp = new RegExp(' ', 'g');
    input = input.replace(regExp, '%20');

    let mapsURL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
    mapsURL += '?types=geocode';
    mapsURL += '&key=YOUR-KEY-HERE';
    mapsURL += `&input=${input}`;
    const endpoint = 'middle.php';

    let formData = new FormData();
    formData.append('url', mapsURL);

    fetch(endpoint, {
        method: 'post',
        body: formData
        })
        .then(blob => blob.json())
        .then(response => {
            const predictions = response.predictions;
            let {length} = predictions;
            let pattern = '';
            for(let i = 0; i < length; i++){
                pattern += i == 0 ? '' : '|';
                pattern += predictions[i].description
            }
            const input = document.getElementById('autocomplete');
            input.setAttribute('pattern', pattern);
        });
}

CORSポリシーに問題があるため、php中間体を使用する必要がありました。

<?php
header('Content-Type: application/json');
$url = $_POST['url'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_VERBOSE, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_AUTOREFERER, false);
curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_HEADER, 0);
$result = curl_exec($ch);
echo curl_error($ch);
curl_close($ch);
echo $result;
0
Gabriel Monteiro

私も同じ問題を抱えていました。以下は回避策として思いついた関数です。これは、onchangeやonkeyupなどのイベントと組み合わせて使用​​できます。それが役に立てば幸い！

//Arguments:

address - string containing the place that you want to validateaddress_success_div - div object specifically used for displaying validation

function is_location_valid(address, address_success_div)
{
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( {"address": address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK)
        {
            address_success_div.innerHTML = "SUCCESS";
        }
        else
        {
            address_success_div.innerHTML = "FAILURE";
        }
    });
}
0
user2027454
    var options = {
        language: 'en',
        types: ['(cities)'],
    };

    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    input.addEventListener("change", function(){
        input.value = "";
    });

入力が変更されたときに値を終了すると、うまくいきます。 Googleプレイスの使用を強制します。

0
Martí Cols