Skip to content

Forward geocoding based on a single-slot input field

This example demonstrates a simple and efficient geocoding process using a single-slot input field. Users can enter an address into a field. The given address is then converted into geographic coordinates (latitude and longitude), that are displayed on the map using a marker.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Forward Geocoding with Single Slot</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; 
                }

            #submit-button { 
                padding: 5px 10px;
                margin-left: 5px; 
                }
        </style>
    </head>

    <body>
        <div id="input-container">
            <input type="text" id="address-input" placeholder="Enter address or search string">
            <button id="submit-button">Geocode</button>
        </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: 14,
                style: smartmapsgl.MapStyle.LIGHT
            });

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

            let currentMarker = null;

            document.getElementById('submit-button').addEventListener('click', async () => {
                const searchString = document.getElementById('address-input').value;
                if (!searchString) {
                    alert("Please enter an address or search string.");
                    return;
                }
                try {
                    const geocodeData = await geocoder.geocode({country: "", singleSlot: searchString});
                    if (geocodeData.features && geocodeData.features.length > 0) {
                        const coordinates = geocodeData.features[0].geometry.coordinates;
                        map.setCenter({ lat: coordinates[1], lng: coordinates[0] });
                        if (currentMarker) { currentMarker.remove(); }
                        currentMarker = new smartmapsgl.Marker()
                            .setLngLat([coordinates[0], coordinates[1]])
                            .addTo(map);
                    } else {
                        alert("No results found.");
                    }
                } catch (error) {
                    console.error('Error during geocoding:', error);
                    alert("An error occurred while geocoding.");
                }
            });
        </script>
    </body>
</html>