Restrict geocode autocomplete to a contry

Question

I need help with google places autocomplete API. I am getting the autocomplete address and lat and long from the API. Without restriction to a country the code works fine and I get the desired address, lat and long. However when I try to add country restriction, the lat and long fails to send along with my form.

Here is the working code without country restriction:

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>

Here is the code with country restriction that I need help with:

<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>

Here's the lines that's causing the problem:

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

My form:

<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>

address.php

<?php

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

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

?>

Thanks for your help in advance.

How are we supposed to **reproduce** the issue? What is the input that doesn't work? Why does it *fail*? What errors do you get? What have you tried to debug? Please provide a [mcve]. — MrUpsidown, Feb 14 '20 at 12:27
I don't get any errors. Just that the latii and lngii values don't get included when the form is submitted. But when I try it without the country restriction it's submitted. I'm definitely doing something wrong — devupp, Feb 14 '20 at 12:36
document.getElementById('latitude').value = place.geometry.location.lat(); document.getElementById('longitude').value = place.geometry.location.lng(); are supposed to populate those fields. It populates them without the country restriction — devupp, Feb 14 '20 at 12:39
*the lat and long fails to send along with my form* - What form? I can't see any form in the code you shared. What result do you get from the API? Did you check that?? Anyway... I won't comment/reply here until you provide a [mcve], read **minimal** and **complete** and **reproducible**. — MrUpsidown, Feb 14 '20 at 12:43
I've updated my question. Please check and let me know if I'm missing anything. Thanks — devupp, Feb 14 '20 at 13:17
There seem to be no help here. Anyway thanks for your effort so far MrUpsidown. — devupp, Feb 15 '20 at 15:32
You haven't tried to debug anything or have you? The code you posted gives me an error: `Uncaught ReferenceError: options is not defined`. Why are you creating `new google.maps.places.Autocomplete()` two times? You should make sure you understand the code you copy/paste in your own code and you should learn how to debug Javascript. — MrUpsidown, Feb 15 '20 at 18:21
Also, the **very least** you should do when asking a question here is to provide errors when there **are** errors. You said you don't get any errors but what you posted **will** generate errors. Even your HTML is incorrect. Use a proper IDE, indent your code correctly, learn basic debugging techniques for **all** languages that you use. You should also take the [tour] and read on [ask] a good question. — MrUpsidown, Feb 15 '20 at 18:26

score 0 · Answer 1 · answered Feb 15 '20 at 18:34

I finally got it to work. Thanks to the answer here How to limit google autocomplete results to City and Country only.

My working code is:

<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>

Restrict geocode autocomplete to a contry

1 Answers1