Skip to content

Autocomplete for Addresses

SmartMaps provides auto-completion for addresses. While you start typing an address in the example below, suggestions of addresses appear, which can be transferred to the form field by selection. This example is complete; you can save it locally and run it in an HTTP context. You only have to replace the value for the apiKey.

  • Instructions: Type 2 or more characters for results.
Autocomplete Integration 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Autocomplete Integration</title>
    <style>
        /* Map and autocomplete styling */
        #map-wrapper {
            width: 100%;
            height: 500px;
            position: relative;
        }
        #sm-autocomplete-con {
            position: absolute;
            left: 10px;
            z-index: 1100;
        }
        #map {
            width: 100%;
            height: 100%;
        }
        .sm-search {
            margin: 0;
            border-radius: 0;
            min-width: 300px;
            max-width: 100%;
        }

        .sm-autocomplete [type=search], .sm-autocomplete [type=text] {
            height: 2rem;
        }

    </style>
</head>
<body>
    <div id="map-wrapper">
        <div id="sm-autocomplete-con" class="leaflet-control">
            <input id="all" class="sm-search" type="search" placeholder="Search for addresses">
        </div>
        <div id="map" style="height: 350px;"></div>
    </div>

    <!-- SmartMaps-API -->
    <script src="https://www.yellowmap.de/api_rst/load/?apiKey={YOUR API-KEY}&libraries=autocomplete-5"></script>
    <script>
        ym.ready({ autocomplete: 5 }, function (modules) {
            // Define map
            var map = ym.map("map", {
                center: ym.latLng(50.991897, 8.435568),
                zoom: 5,
                zoomControl: false
            });

            // Add control elements
            var fullscreenControl = new ym.modules.provider.Control.Fullscreen();
            fullscreenControl.setHelper(map._fullscreen);
            fullscreenControl.setPosition("topright");
            map.addControl(fullscreenControl);

            map.addControl(new ym.modules.provider.Control.Zoom({ position: "topright" }));

            // Geocoder setup
            var geocoder = new ym.services.GeoCoder();
            geocoder.on("success", function (req, res) {
                if (res.body && res.body.features && res.body.features.length) {
                    var geojson = ym.geoJson(res.body.features[0]);
                    var center = ym.latLng(geojson._geoJson.geometry.coordinates[1], geojson._geoJson.geometry.coordinates[0]);
                    var layer = ym.geoJson(geojson._geoJson, {
                        onEachFeature: function (feature, layer) {
                            layer.setIcon(new modules.provider.Icon({
                                iconUrl: '/assets/images/markerIcon.svg',
                                iconRetinaUrl: '/assets/images/markerIcon.svg',
                                iconSize: [30, 49],
                                iconAnchor: [15, 49],
                                popupAnchor: [0, -48]
                            }));
                        }
                    });
                    map.addLayer(layer);
                    map.setView(center, 15);
                }
            });

            // Autocomplete setup
            var autoComplete = modules.autoComplete('#all', {
                dataType: 'json'
            });
            autoComplete.setMap(map);

            autoComplete.on('suggestion', function (geojson, addresses, query) {
                // Handle suggestions
            });

            autoComplete.on('selected', function (geojson, address, query) {
                if (address.houseNo == null) {
                    var center = ym.latLng(geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]);
                    var layer = ym.geoJson(geojson, {
                        onEachFeature: function (feature, layer) {
                            layer.setIcon(new modules.provider.Icon({
                                iconUrl: '/assets/images/markerIcon.svg',
                                iconRetinaUrl: '/assets/images/markerIcon.svg',
                                iconSize: [30, 49],
                                iconAnchor: [15, 49],
                                popupAnchor: [0, -48]
                            }));
                        }
                    });
                    map.addLayer(layer);
                    map.setView(center, 15);
                } else {
                    geocoder.geocode({
                        country: address.country,
                        zip: address.zip,
                        city: address.city,
                        street: address.street,
                        houseNo: address.houseNo,
                    });
                }
            });

            autoComplete.on('empty', function (query) {
                // Handle empty results
                geocoder.geocodeString(query);
            });
        });
    </script>
</body>
</html>