Beispiel Autocomplete V5

Falls Sie die alte Autocomplete Version 3 benutzen, klicken Sie hier. Wenn Sie auf die aktuelle Version wechseln wollen, finden Sie hier eine Migrationsanleitung.

SmartMaps stellt eine Autovervollständigung für Adressen zur Verfügung. Während Sie im Beispiel unten eine Adresse einzutippen beginnen, erscheinen Vorschläge von Adressen, die durch Auswahl in das Formularfeld übernommen werden können.

SmartMaps-Karte

Codebeispiel: Autocomplete

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Testbeispiel Autocomplete</title>

    <style>
        #map-wrapper {
            width: 100%;
            height: 500px;
            position: relative;
        }

        #map-wrapper .sm-autocomplete {
            position: absolute;
            top: 11px;
            left: 57px;
            z-index: 1100;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map-wrapper" style="width: 100%;">
        <div id="map" style="height: 350px;"></div>
        <input id="all" class="sm-search" type="search" placeholder="search international" style="margin:0px">
    </div>
    	<script
        src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3,autocomplete-5&apiKey={API_KEY}"></script>
    <script>
        ym.ready({ autocomplete: 5 }, function (modules) {
            var map = ym.map('map', {
                center: [49.001, 8.417],
                zoom: 12,
            });

            //Konfiguriere GeoCoder
            var geocoder = new ym.services.GeoCoder();
            geocoder.on('success', function (req, res) {
                if (res.body && res.body.features && res.body.features.length) {
                    if (res.body && res.body.features && res.body.features.length) {
                        var geojson = ym.geoJson(res.body.features[0]);
                        var center = geojson.getBounds().getCenter();
                        //Setze Kartenauschnitt
                        map.setView(center, 12);
                    }
                }
            });

            //Konfiguriere Autocomplete
            var autoComplete = modules.autoComplete('#all', {
                isoCountries: [],
                dataType: 'json'
            });

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

            autoComplete.on('selected', function (geojson, address, query) {
                var center = ym.latLng(geojson.geometry.coordinates[1], geojson.geometry.coordinates[0]);
                map.setView(center, 12);
            });

            autoComplete.on('empty', function (query) {
                // in case no suggestions were found, but the
                // user pressed Enter after writing
                geocoder.geocodeString(query);
            });

            autoComplete.on('error', function (err) {
                // The error listener will handle the thrown errors from
                // the autocomplete (including aborted requests to the webserver)
                // console.error(err);
            });
        });
    </script>
</body>

</html>