Autocomplete für Adressen

SmartMaps bietet eine Autovervollständigung für Adressen. Während Sie im Beispiel unten mit der Eingabe einer Adresse beginnen, erscheinen Adressvorschläge, die per Auswahl in das Formularfeld übernommen werden können. Dieses Beispiel ist vollständig; Sie können es lokal speichern und in einem HTTP-Kontext ausführen. Sie müssen nur den Wert für den apiKey ersetzen.
Anleitung: Geben Sie 2 oder mehr Zeichen ein, um Ergebnisse zu erhalten.
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={[INSERT 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>