function initMap() {
    var map;
    var bounds = new google.maps.LatLngBounds();

    // Default map options
    var mapOptions = {
        mapTypeId: "roadmap",
        styles: lightMapStyles, // Usa il tema predefinito
    };

    // Initialize the map with default options
    map = new google.maps.Map(
        document.getElementById("mapCanvasTwo"),
        mapOptions,
    );

    // Geolocalizzazione
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                var userLocation = new google.maps.LatLng(
                    position.coords.latitude,
                    position.coords.longitude,
                );
                map.setCenter(userLocation);
                map.setZoom(12);

                // Aggiungi un marker per la posizione dell'utente
                var userMarker = new google.maps.Marker({
                    position: userLocation,
                    map: map,
                    title: "Your Location",
                    icon: icons["home"].icon, // Icona personalizzata
                });

                // Recupera i marker dal database
                fetchMarkersFromDB(map, bounds);
            },
            function () {
                handleLocationError(true, map.getCenter());
            },
        );
    } else {
        // Se la geolocalizzazione non è supportata o rifiutata
        handleLocationError(false, map.getCenter());
    }
}

// Funzione per recuperare i marker dalla tabella "yogaschool"
function fetchMarkersFromDB(map, bounds) {
    $.ajax({
        url: "get_markers.php", // Pagina PHP che esegue la query e restituisce i dati
        type: "GET",
        dataType: "json",
        success: function (response) {
            if (response.status === "success") {
                var markers = response.data;
                markers.forEach(function (markerData) {
                    var position = new google.maps.LatLng(
                        markerData.latitude,
                        markerData.longitude,
                    );
                    bounds.extend(position);

                    // Aggiungi un marker sulla mappa
                    var marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: markerData.name,
                        icon: icons["gymnasium"].icon,
                    });

                    // Aggiungi una finestra informativa per ogni marker
                    var infoWindow = new google.maps.InfoWindow({
                        content: `<h3>${markerData.name}</h3><p>${markerData.description}</p>`,
                    });

                    marker.addListener("click", function () {
                        infoWindow.open(map, marker);
                    });
                });

                map.fitBounds(bounds); // Adatta la mappa ai marker
            } else {
                console.error("Error fetching markers: ", response.message);
            }
        },
        error: function (xhr, status, error) {
            console.error("Error: ", status, error);
        },
    });
}

// Gestione degli errori di geolocalizzazione
function handleLocationError(browserHasGeolocation, pos) {
    console.error(
        browserHasGeolocation
            ? "Error: Geolocation failed."
            : "Error: Browser doesn't support geolocation.",
    );
}