Skip to content

Reverse geocoding based on the user location

This example demonstrates how reverse geocoding works, by using the users current location. The geocoded address will then be displayed in the box in the upper left corner of the map. 

<!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>