How to restrict google map autocomplete

Question

Question 1) I'm attempting to search for an postcode (UK) via autocomplete code below

For example, if I search for NE237AP- this is what I get Annitsford Drive, Dudley, Cramlington NE23 7AP, UK

But the postcode is omitted if I search street name Annitsford Drive - I get Annitsford Drive, Annitsford, Cramlington, UK

Why is that.

Question 2) How can I just use the Postcode results from above into another text box.

Question 3) Is there a way to restrict to UK - seen many snippets of code but none of them seem to work, with the code below.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />




  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>


 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&amp;libraries=places"></script>

<script>
  google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
      var input = document.getElementById('autocomplete_search');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function () {
      var place = autocomplete.getPlace();

      // place variable will have all the information you are looking for.
      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());
    });
  }
</script>


  <title>Google Places Autocomplete InputBox Example Without Showing Map - Tutsmake.com</title>
 <style>
    .container{
    padding: 10%;
    text-align: center;
   } 
 </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-12"><h2>Google Places Autocomplete InputBox Example Without Showing Map</h2></div>
        <div class="col-12">
            <div id="custom-search-input">
                <div class="input-group">
                    <input id="autocomplete_search" name="autocomplete_search" type="text" class="form-control" placeholder="Search" />
                    <input type="hidden" name="lat">
                    <input type="hidden" name="long">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Please only ask one question in a question. – geocodezip Sep 11 '19 at 16:53 — geocodezip, Sep 11 '19 at 16:53
can you help on any please. – PaulJames Sep 12 '19 at 05:44 — PaulJames, Sep 12 '19 at 05:44
see [Ask] and ask a single good question – geocodezip Sep 12 '19 at 05:58 — geocodezip, Sep 12 '19 at 05:58
So is that a no.... Is there a page on how to answer one... – PaulJames Sep 12 '19 at 17:05 — PaulJames, Sep 12 '19 at 17:05

score 1 · Answer 1 · answered Sep 26 '19 at 01:50

You are not getting the postcode detail because the address Annitsford Drive, Annitsford, Cramlington, UK itself is actually covered by multiple post codes such as NE23 7AP,NE23 7AX, etc.
You can refer to the sample code here that fetches the data and populates it in an address form. Note that you may need to change the components in the sample above to cater the address formats in the corresponding region.
As per this documentation:

Use the componentRestrictions option to restrict the autocomplete search to a particular country.

In your case, inside your initialize function, you can use the lines below to restrict the autocomplete predictions to UK:

var input = document.getElementById('autocomplete_search');
var options = {
    componentRestrictions: {country: 'gb'}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

1. Annitsford Drive is Only NE237AP - but when using near any other address its not showing postcode. NE23 7AX = Morris court — PaulJames, Sep 27 '19 at 04:28

How to restrict google map autocomplete

1 Answers1