Example Autocomplete V5

If you are using the old autocomplete version 3, click here. If you want to switch to the new autocomplete v5, here are the migration instructions.

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.

SmartMaps-Map

Code example: 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,
            });

            //Config 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);
                    }
                }
            });

            //Config Autocomplete
            var autoComplete = modules.autoComplete('#all', {
                locales: [],
                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>