-1

I have an input that uses basic google places api to get address however I cannot figure out how to get it to display the zip code between state and country. Im assuming i need to add something within this block but even if I remove it still works, so im unsure what too do. for example type in 576 ballman rd and it will display this
576 Ballman Rd, Reynoldsburg, OH, USA
i would like to say this
576 Ballman Rd, Reynoldsburg, OH,43068 USA
im not sure how to add the zip code.

{
    fields: ["address_components"],
    types: ["address"],
    }

here is the full code below

<!doctype html>
<html lang="en">

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
  </script>
  <script>
    function initMap() {
      window.alert('initMap fired');

      const autocompleteInput = document.getElementById('location');

      const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
        fields: ["address_components"],
        types: ["address"],
      });
      console.log('hello');
      console.log('nope');

    }
  </script>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>make zip code show</title>
</head>

<body>
  <script>
    window.onload = initMap;
  </script>

  <div class="mb-3">
    <input type="text" class="form-control" id="location" name="address" size='50'>
    <br>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&channel=GMPSB_addressselection_v1_cAB" async defer></script>
</body>
</html>
asdfgedddd
  • 11
  • 2
  • I get an error with the posted code: ` "Uncaught ReferenceError: address_components is not defined",`. Could you clarify your issue? What do you mean by "display the zip code between state and country"? Is that in the autocomplete dropdown? Or can you not get the zipcode out of the response from the API? – geocodezip Mar 24 '23 at 17:35
  • remove this line(console.log(address_components);) im fixing the code – asdfgedddd Mar 24 '23 at 17:40
  • i reworded my question. 576 ballman rd and it will display this 576 Ballman Rd, Reynoldsburg, OH, USA i would like to say this 576 Ballman Rd, Reynoldsburg, OH,43068 USA im not sure how to add the zip code. – asdfgedddd Mar 24 '23 at 17:44
  • 1
    THe [Autocomplete class](https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions) doesn't allow the format of the predictions to be changed. You can implement your own, using the [AutocompleteService](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service).. You could also make a [feature request](https://developers.google.com/maps/documentation/javascript/support#feature-requests). – geocodezip Mar 24 '23 at 18:32
  • tks i have a work around but its more code and more request and event listeners i was trying to avoid but tks for the info ill ahve to do somin like this http://jsfiddle.net/jmhGS/22/ – asdfgedddd Mar 24 '23 at 18:43
  • Do a place details request with the place id and get the `formatted_address`. – MrUpsidown Mar 26 '23 at 14:10

1 Answers1

0

Place Autocomplete does not return postal codes unless they are included in the requests (input).

This is currently the intended behavior, Place Autocomplete provides minimal output to save screen space.

See also feature request 73730686 (Autocomplete should have a flag to force results to display zip and postal codes) and star it to receive updates if you are interested.

miguev
  • 4,481
  • 21
  • 41