Ограничить автозаполнение геокода до контри - PullRequest
Новая
       53

Ограничить автозаполнение геокода до контри

0 голосов
/ 14 февраля 2020

Мне нужна помощь с API автозаполнения Google. Я получаю адрес автозаполнения и широту и долготу от API. Без ограничений для страны код работает нормально, и я получаю желаемый адрес, широту и длину. Однако, когда я пытаюсь добавить ограничение по стране, широта и долгота не удается отправить вместе с моей формой.

Вот рабочий код без ограничения по стране:

JS

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
    <script>
        function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('searchTextField').value = place.name;
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Вот код с ограничением страны, с которым мне нужна помощь: 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
    <script>
        function initialize() {

        autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('searchTextField')),
    {types: ['geocode'],
    componentRestrictions: {country: 'us'}});

          var input = document.getElementById('searchTextField');

 var autocomplete = new google.maps.places.Autocomplete(input, options);

            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('searchTextField').value = place.name;
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Вот строки, которые вызывают проблему: 

autocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(document.getElementById('searchTextField')),
    {types: ['geocode'],
    componentRestrictions: {country: 'us'}});

Моя форма: 

<html>
<head>
<title>Address Demo</title>
 </head>
<body>
<form action="address.php" method="GET">

<div class="container">
<div class="panel panel-primary">
<div class="panel-heading" style="background-color:#00CDCD">
<h2 class="panel-title">Address</h2>
</div>
<div class="panel-body">
<input name="address" id="searchTextField" placeholder="Enter area name" type="text" class="form-control" required>
<input type="hidden" name="latii" id="latitude">
<input type="hidden" name="lngii" id="longitude">
<input type="submit" name="submit" value="SUBMIT" class="bookingbtn top-10 bottom-20">                                                            
</div>
</div>
</form>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

</body>
</html>

адрес. php

<?php

$address = $_GET['address'];
$latii = $_GET['latii'];
$lngii = $_GET['lngii'];

echo "$address </br>";
echo "$latii </br>";
echo "$lngii";

?>

Спасибо за вашу помощь заранее.

1 Ответ

0 голосов
/ 15 февраля 2020

Я наконец получил его на работу. Благодаря ответу здесь Как ограничить результаты автозаполнения Google только для города и страны .

Мой рабочий код: 

<script>
        function initialize() {
    var options = {
  types: ['geocode'],
  componentRestrictions: {country: "us"}
 };
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input, options);
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                var place = autocomplete.getPlace();
                document.getElementById('searchTextField').value = place.name;
                document.getElementById('latitude').value = place.geometry.location.lat();
                document.getElementById('longitude').value = place.geometry.location.lng();
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
...