How to get the latitude and longitude in autocomplete search google api

Question

Here I am using google map API, if I search the address they are providing, street address, state, city, zip code, and country, it is working fine now I want to get latitude and longitude of that particular address how can get

JAVASCRIPT

// This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

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

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

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

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }

HTML

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number"
          disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <!-- Note: Selection of address components in this example is typical.
         You may need to adjust it for the locations relevant to your app. See
         https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
    -->
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>

Answer 1

  <script src="https://maps.googleapis.com/maps/api/js?libraries=places" type="text/javascript"></script> <script type="text/javascript"> function initialize() { var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, 'place_changed', function () { var place = autocomplete.getPlace(); var lat = place.geometry.location.lat(); var long = place.geometry.location.lng() alert('latitude'+' '+lat+','+ 'longitude'+' '+long); document.getElementById('city2').value = place.name; document.getElementById('cityLat').value = place.geometry.location.lat(); document.getElementById('cityLng').value = place.geometry.location.lng(); //alert("This function is working!"); //alert(place.name); // alert(place.address_components[0].long_name); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" /> <input type="hidden" id="city2" name="city2" /> <input type="hidden" id="cityLat" name="cityLat" /> <input type="hidden" id="cityLng" name="cityLng" />