<script>
import { PlacesAutocomplete } from 'places-autocomplete-js';

document.addEventListener('DOMContentLoaded', () => {
  try {

    // Initialize the PlacesAutocomplete instance
    const autocomplete = new PlacesAutocomplete({
      containerId: 'autocomplete-container',
      googleMapsApiKey: 'YOUR_GOOGLE_MAPS_API_KEY', // Replace with your actual key
      onResponse: (placeDetails) => {
          console.log(placeDetails); // Log the selected place details
      },
      onError: (error) => {
          console.error('Autocomplete Error:', error.message || error);
      },
      requestParams: {
          region: 'GB', // Example region
          includedRegionCodes: ['GB'], // Example countries
      },
      options: {
          placeholder: 'Start typing your address...',
          clear_input:false // Retain input value after selection
      }
    });

  } catch (error) {
    console.error("Failed to initialize PlacesAutocomplete:", error.message);
  }

  // Get the select element and add an event listener for changes
  const el = document.getElementById("country-select");
  el.addEventListener("click", useCurrentLocation);

  function useCurrentLocation() {
      if (navigator.geolocation) {
          status = 'Getting your location...';
          navigator.geolocation.getCurrentPosition((position) => {
              const { latitude, longitude } = position.coords;
              status = "Location found! Biasing results around your position.";
              autocomplete.setRequestParams({
                  origin: {
                      lat: latitude,
                      lng: longitude
                  },
                  // You might also want to set the region based on the user's location
                  // This would require a reverse geocoding step, which is beyond this example
              });
          }, (error) => {
              status = "Error getting location: " + error.message;
              console.error(error);
          });
      } else {
          status = "Geolocation is not supported by this browser.";
      }
  });



</script>

...
<button onclick="useCurrentLocation()">Use My Location</button>
<div id="autocomplete-container"></div>
...