Autocomplete

Dieses Beispiel demonstriert die SmartMaps-Autocomplete-Funktion mithilfe des Autocomplete Service.
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Autocomplete</title>
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/autocomplete/v5/umd/autocomplete.min.js"></script>
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <link rel="stylesheet" href="https://cdn.smartmaps.cloud/packages/smartmaps/autocomplete/autocomplete.css">   
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        html,
        body {
            height: 100%;
            font-family: "Open Sans", Helvetica, sans-serif;
            margin: 0;
        }

        .sm-autocomplete {
            position: absolute;
            width: 20%;
            align-items: center;
            margin: 0.5rem;
            width: calc(100% - 58px);
            max-width: 350px;
            font-size: 16px;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
            outline: none;
            border: 1px solid #ddd;
            background-color: white;
            border-radius: 4px;

            @media only screen and (max-width: 600px) {
                margin-top: 13%;
            }
        }
    </style>
    </head>

    <body>
        <div id="map-wrapper">
            <div id="map"></div>
            <input id="ac" class="sm-search" type="search" placeholder="search international" style="margin:0px">
        </div>
        <script>
            const apiKey = "[INSERT API-KEY]";

            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 10,
                style: smartmapsgl.MapStyle.LIGHT
            });

            const autocompleteElement = document.querySelector("#ac");

            const autocompleteOptions = {
                isoCountries: ['de'],
                top: 5
            }


            async function init() {
                const autocomplete = await smartmaps.autocompleteService.createAutocomplete(
                    autocompleteElement,
                    apiKey,
                    autocompleteOptions
                );

                autocomplete.addEventListener("selected", (e) => {
                    const coordinates = e.detail.geojson.properties.geometry.coordinates

                    map.jumpTo({
                        center: coordinates,
                        zoom: 12,
                        bearing: 0,
                    });
                });
            }

            init();

        </script>
    </body>

</html>