Skip to content

Autocomplete

This example demonstrates the SmartMaps autocomplete feature using the 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 = {
                dataType: 'jsonp',
                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>