Reverse-Geocoding basierend auf dem Standort des Nutzers

Dieses Beispiel zeigt, wie Reverse-Geocoding funktioniert, unter Verwendung des aktuellen Standorts des Nutzers. Die geocodierte Adresse wird dann im Feld oben links auf der Karte angezeigt.
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Reverse Geocoding with User Location</title>
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/geocoding/umd/geocoding.min.js"></script>
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            body { 
                margin: 0; 
                padding: 0; 
                font-family: Arial, sans-serif; 
                }

            html, 
            body, 
            #map { 
                height: 100%; 
                }

            #input-container {
                position: absolute; 
                top: 10px; 
                left: 10px; 
                z-index: 1;
                background-color: white; 
                padding: 10px; 
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
                }

            #address-input { 
                width: 300px; 
                padding: 5px; 
                }
        </style>
    </head>

    <body>
        <div id="input-container">
            <input type="text" id="address-input" placeholder="Your location will appear here" readonly>
        </div>
        <div id="map"></div>
        <script>
            const apiKey = "[INSERT API-KEY]";
            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 10,
                style: smartmapsgl.MapStyle.LIGHT
            });

            const geocoder = new smartmaps.geocodingService.Geocoder(apiKey);

            const geolocate = new smartmapsgl.GeolocateControl({
                positionOptions: { enableHighAccuracy: true },
                trackUserLocation: false
            });
            map.addControl(geolocate);

            map.on('load', () => { geolocate.trigger(); });

            geolocate.on('geolocate', async (e) => {
                const lon = e.coords.longitude;
                const lat = e.coords.latitude;
                try {
                    const geocodeData = await geocoder.geocodeReverse({lng: lon, lat: lat});
                    const geocodeProperties = geocodeData.features[0].properties;
                    const formattedAddress = `${geocodeProperties.street} ${geocodeProperties.houseNo}, ${geocodeProperties.zip} ${geocodeProperties.city}, ${geocodeProperties.isoCountry}`;
                    document.getElementById('address-input').value = formattedAddress;
                } catch (error) {
                    console.error('Error during reverse geocoding:', error);
                }
            });
        </script>
    </body>
</html>