Question

I want to implement feature in my TextBox where user will type some address and from Google API returns address from that user will select the correct address. And He will select the address my Street, Zip, Country, City all will automatically fill.

I am trying this but not get success ( Small part of my aspx page )

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>


<script type="text/javascript">

   var placeSearch,autocomplete;
   var component_form = {
   'route': 'short_name',
    'route': 'long_name',
    'locality': 'long_name',
    'administrative_area_level_1': 'short_name',
    'country': 'long_name',
    'postal_code': 'postal_code'
  };

  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }

  function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in component_form) {
      document.getElementById(component).value = "";
      document.getElementById(component).disabled = false;
    }

    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }

  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
      });
    }
  }
</script>

And my .aspx page is like this

 <div onload="initialize();">

<asp:UpdatePanel ID="UpdatePanelTabContainer" runat="server">
      <ContentTemplate>
       <table width="100%">
         <tr>
           <td>
               street
           </td>
            <td>
              <asp:TextBox ID="txtPickupStreet" runat="server" MaxLength="100" Width="162px" placeholder="Enter your address" AutoPostBack="true"  onFocus="javascript:geolocate()"></asp:TextBox>
           </td>
      </tr>
        <tr>
            <td>
                Postal Code
            </td>
             <td>
                <asp:TextBox ID="txtPickupPC" runat="server" MaxLength="11" Width="90px" />
             </td>
        </tr>

            </table>
    </ContentTemplate>
            </asp:UpdatePanel>

Here the user will type in street TextBox He will get relative result and select after that all TextBox will be fill .

Answer 1

Ok there are a few problems with your code.

I have made a working demo for you.

I did use jQuery for my additions, but I’m sure you can replace that if you aren’t using jQuery.

component_form object is wrong
it should look like this

var component_form = {
'txtPickupUnitNumber': 'subpremise',
'txtPickupStreetNumber': 'street_number',
'txtPickupStreetName': 'route',
'txtPickupSuburb': 'locality',
'txtPickupPC': 'postal_code',
'txtPickupState': 'administrative_area_level_1',
'txtPickupCountry': 'country'

};

The array key is the id of the textbox and the value is the name of the google places result address_component type.

The geolocate function doesn’t do anything useful
You are setting the autocomplete search bounds to one lat/lng coord. A bounds should be a collection of lat/lngs. If you are displaying a map on the same page as this form you could do as follows.

function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            // set the map to the user locations
            map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
            // use the viewport as the search bounds
            autocomplete.setBounds(map.getBounds()));
      });
    }
}

The fillInAddress function will need to be changed to deal with the new component_form array.

function fillInAddress() {
    var place = autocomplete.getPlace();
    // if you use jQuery then you can delete this and just set the attr to true in the fillFormInput function
    for (var component in component_form) {
        document.getElementById(component).value = "";
        document.getElementById(component).disabled = false;
    }

    for (var j = 0; j < place.address_components.length; j++) {
        var att = place.address_components[j].types[0];
        fillFormInput(att, place.address_components[j].long_name);
    }
}

// This new function searchs for the textbox that corresponds to the address_component type name
function fillFormInput(att, val) {
    for (var c in component_form) {
        if (component_form[c] === att) {
            $('#'+c).val(val);
        }
    }
}