Unlock The Ability of Google Maps API: 10x User Engagement

<div>
  <form id="form" class="d-flex align-items-center position-relative ">
    <input type="text" name="location" placeholder="Search your location"
      class="form-control bg-white border-0 rounded-4 shadow-none px-4 py-3 w-100" id="txtLocation">
    <button class="btn btn-primary rounded-4 px-3 py-2 position-absolute align-items-center m-1 end-0"><svg
        xmlns="http://www.w3.org/2000/svg" width="22px" height="22px">
        <use href="#search" />
      </svg></button>
  </form>

  <div class="row">
    <div class="col-md-12 mt-2">
      <input type="text" name="formatted_address" placeholder="Address"
        class="form-control bg-white border-0 rounded-4 shadow-none px-4 py-3 w-100" id="formatted_address">
    </div>
    <div class="col-md-12 mt-2">
      <input type="text" name="latitude" placeholder="Latitude"
        class="form-control bg-white border-0 rounded-4 shadow-none px-4 py-3 w-100" id="latitude">
    </div>
    <div class="col-md-12 mt-2">
      <input type="text" name="longitude" placeholder="Longitude"
        class="form-control bg-white border-0 rounded-4 shadow-none px-4 py-3 w-100" id="longitude">
    </div>
  </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&loading=async&libraries=places&callback=initialize"></script>

// Function to initialize Google Maps API and related services
function initialize() {
  const input = document.getElementById("txtLocation"); // Get the search input field

  // Options for the Autocomplete service
  const options = {
    fields: ["place_id", "formatted_address", "name"],
    strictBounds: false,
    types: ["establishment"], // Optionally filter suggestions to establishments
  };

  const geocoder = new google.maps.Geocoder; // Create a Geocoder object for address lookups
  const autocomplete = new google.maps.places.Autocomplete(input, options); // Create Autocomplete service for location suggestions

  // Disable type filtering by default (optional customization)
  autocomplete.setTypes([]);

  const infowindow = new google.maps.InfoWindow(); // Create an InfoWindow object (not used in this code)

  // Add event listener for place selection
  autocomplete.addListener("place_changed", () => {
    infowindow.close(); // Close any existing InfoWindow

    const place = autocomplete.getPlace(); // Get the selected place object
    console.log('Place:', place); // Log the place object for debugging

    // Reverse geocode using place ID to get full address
    geocoder.geocode({'placeId': place.place_id}, function (results, status) {
      if (results.length > 0) {
        document.getElementById("formatted_address").value = results[0].formatted_address;
      }
      if (status === google.maps.GeocoderStatus.OK) {
        const lat = results[0].geometry.location.lat();
        const lng = results[0].geometry.location.lng();
        setLocationCoordinates(lat, lng); // Update latitude and longitude fields
      }
    });
  });
}

// Function to update latitude and longitude input fields
function setLocationCoordinates(lat, lng) {
  const latitudeField = document.getElementById("latitude");
  const longitudeField = document.getElementById("longitude");
  latitudeField.value = lat;
  longitudeField.value = lng;
}