Search code examples
google-mapsgoogle-places-apigoogle-places-autocomplete

How to get street level address by autocomplete google api


I want get street level address but couldn't get anything.

thanks in advance.

  <script>   
    google.maps.event.addDomListener(window, 'load', function () {
        var options = {
            types: ['(address)'],
            componentRestrictions: ['pk']
        };

        var input1 = document.getElementById('txtUserStartLocation');
        var places = new google.maps.places.Autocomplete(input1, options);

        var input2 = document.getElementById('txtUserDistination');
        places = new google.maps.places.Autocomplete(input2, options)

    });
</script>

Solution

  • The mistake is that you are using the (address) type value, it must be address according to the documentation:

    https://developers.google.com/places/supported_types#table3

    Have a look at this example:

    var autocomplete;
    
    function initAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete(
          document.getElementById('autocomplete'),
          {
              types: ['address'],
              componentRestrictions: {
                  country: ['pk']
              }
          });
    }
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #autocomplete {
       width: 400px;
    }
    <div id="locationField">
        <input id="autocomplete" placeholder="Enter your address" type="text"></input>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initAutocomplete" async defer></script>

    I hope this helps!