title: I want to get latitude and longitude from Autocomplete Address Form
body: <p>I'm trying to save latitude and longitude by autocomplete Google Maps, but I can't make this work. I don't know how to use Google Maps Api. I need to add 2 fields with longitude and latitude, and when I select my address from my input, these 2 fields ( longitude and latitude ) should be filled with the correct values.</p>
  
  <p>What I have tried so far: </p>
  
  <p><a href="https://stackoverflow.com/questions/13478646/google-map-api-get-latitude-and-longitude-from-autocomplete-without-map">Google map api get Latitude and longitude from autocomplete without map</a></p>
  
  <p>Here is my script</p>
  
  <pre><code>&lt;script&gt;
      // This sample uses the Autocomplete widget to help the user select a
  // place, then it retrieves the address components associated with that
  // place, and then it populates the form fields with those details.
  // This sample requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // &lt;script
  // src="https://maps.googleapis.com/maps/api/js?key=MY_API&amp;libraries=places"&gt;
  
  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 predictions to
    // geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'), {types: ['geocode']});
  
    // Avoid paying for data that you don't need by restricting the set of
    // place fields that are returned to just the address components.
    autocomplete.setFields(['address_component']);
  
    // When the user selects an address from the drop-down, 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 then fill-in the corresponding field on the form.
    for (var i = 0; i &lt; 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());
      });
    }
  }
  
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=MY_API&amp;libraries=places&amp;callback=initAutocomplete"
          async defer&gt;&lt;/script&gt;
  
  
  
  </code></pre>
  
  <p><em>Here is my view</em></p>
  
  <pre><code> &lt;div class="form-group col-md-4" style="left: 10px;position: relative" id="locationField"&gt;
                                        &lt;label class="label" for="jobs"&gt;
                                        Address
                                        &lt;/label&gt;
                                        &lt;div class="input-group"&gt;
                                         &lt;div class="input-group-addon" style="border-color: #bbb"&gt;
                                          &lt;i class="icon-hotel-restaurant-235 u-line-icon-pro"&gt;&lt;/i&gt;
                                         &lt;/div&gt;
                                          &lt;label class="input" style="height: 28px"&gt;
                                    &lt;input id="autocomplete"
               placeholder="Enter your address"
               onFocus="geolocate()"
               type="text"
               style="height: 33px"
               name="address"/&gt;                           &lt;/label&gt;
      &lt;/div&gt;
                                      &lt;/div&gt;
  </code></pre>