<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJF2D5rvdvc6xC8BNG4XWjK-1dTTegz8s&libraries=places"></script>

<div id="places-list"></div>

<script>
  // Use geolocation to get the user's current position
  function initMap() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        const userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        // Define the request for nearby nightclubs and bars
        const request = {
          location: userLocation,
          radius: '5000', // 5km radius
          type: ['bar', 'night_club'],
        };

        // Create the service and perform a nearby search
        const service = new google.maps.places.PlacesService(document.createElement('div'));
        service.nearbySearch(request, function(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            let placesList = document.getElementById('places-list');
            placesList.innerHTML = ''; // Clear previous results

            results.forEach((place) => {
              // Dynamically create the HTML for each place result
              let placeElement = document.createElement('div');
              placeElement.innerHTML = `<h3>${place.name}</h3><p>Rating: ${place.rating || 'N/A'}</p>`;
              placesList.appendChild(placeElement);
            });
          } else {
            alert("No results found!");
          }
        });
      }, function() {
        alert("Geolocation failed. Please enable location services.");
      });
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }

  // Load the map on window load
  window.onload = initMap;
</script>