Skip to content

Forward geocoding based on multiple fields

This example demonstrates a multi-field geocoding process, where the user enters address components into separate fields, such as street and house number, city, postal code and country. The given address information 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 Structured Address</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);
            }

            input { 
                width: 200px; 
                padding: 5px; 
                margin-bottom: 5px; 
                }

            #submit-button { 
                padding: 5px 10px; 
                margin-top: 5px; 
                width: 100%; 
                }
        </style>
    </head>

    <body>
        <div id="input-container">
            <input type="text" id="street-input" placeholder="Street and House Number">
            <input type="text" id="city-input" placeholder="City">
            <input type="text" id="zip-input" placeholder="ZIP">
            <input type="text" id="country-input" placeholder="Country">
            <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 street = document.getElementById('street-input').value;
                const city = document.getElementById('city-input').value;
                const zip = document.getElementById('zip-input').value;
                const country = document.getElementById('country-input').value;

                if (!street && !city && !zip && !country) {
                    alert("Please enter at least one search criteria.");
                    return;
                }

                try {
                    const geocodeData = await geocoder.geocode({
                        street: street,
                        city: city,
                        zip: zip,
                        country: country
                    });

                    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>