How do I get the postal code from google map's autocomplete api

Question

So my issue is that the results are spitting out as:

1980 Mission Street, San Francisco, CA, United States

...but I need it to give me the zipcode because when I put it back into google's Geocoder, for some reason it doesn't register the location.

// This is the code I have just the autocomplete input field

var input = document.getElementById('id_address');
var options = {
  types: ['address'],
  componentRestrictions: {country:'us'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);

// This is how I'm using the geocoder

window.onload = function initMap() {
            console.log("{{ task.address }}");
            console.log("{{ location }}");
            var address = "{{ location }}";

            geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': address }, function(results, status) {
                <!-- console.log(address); -->
              if (status == google.maps.GeocoderStatus.OK) {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: results[0].geometry.location,
                    zoom: 12,
                  });
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                  });
              }


            });

        }

I have a working solution, but the user will have to input each piece of the address separately. I'm trying to change it so they can just fill out one input field and then I can spit that address into the gecoder.geocode().

Answer 1

hi im testing maps on angular and using both 'geocode' or 'address'types obtain the same address_component results: <<--- address_component:Arr[5] ---<<< with properties Routes and locality.. etc.. but none give Postal_code propertie...

Map.Component.html

<input ngx-google-places-autocomplete placeholder="Ingrese Direccion de comercio (Calle ### localidad)" [options]="options"(onAddressChange)="AddressChange($event)" >

Map.Component.ts

options={
    bounds:this.defaultBounds,
    strictBounds:true,
    types:['address'],
   //or types:['geocode'] };

  public AddressChange(address: any){
      console.log(address);
 }

Address log

[
    {
        "long_name": "<<street_name>>",
        "short_name": "<<street_name>>",
        "types": [
            "route"
        ]
    },
    {
        "long_name": "locality_name",
        "short_name": "locality_name",
        "types": [
            "locality",
            "political"
        ]
    },
    {
        "long_name": "city_name",
        "short_name": "city_name",
        "types": [
            "administrative_area_level_2",
            "political"
        ]
    },
    {
        "long_name": "province_name",
        "short_name": "province_name",
        "types": [
            "administrative_area_level_1",
            "political"
        ]
    },
    {
        "long_name": "Argentina",
        "short_name": "AR",
        "types": [
            "country",
            "political"
        ]
    }
]

i can't get the postal_code