Single Search Add-on

Initialize a map with a Single Search control. Learn more about the Single Search add-on.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.0.0.js"></script>
        <script src="https://maps-sdk.trimblemaps.com/addon/trimblemaps-singlesearch-1.0.0.js"></script>
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/addon/trimblemaps-singlesearch-1.0.0.css" />
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const map = new TrimbleMaps.Map({
              container: 'map', // container id
                style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id
                center: [-74.2, 40.5],
                zoom: 7
            });
            var ctrl = new TrimbleMapsControl.SingleSearch({
                placeholderText: "Search here",
                doneTypingInterval: 700,
                hideResults: true,
                minSearchTextLength: 3,
                locationRelevance: "mapCenter",
                searchOption: {
                  region: TrimbleMaps.Common.Region.WW,
                  maxResults: 30
                },
                markerStyle: {
                    graphicHeight: 26,
                    graphicWidth: 26,
                    graphicXOffset: -13,
                    graphicYOffset: -13
                },
                markerConfig: {
                    exclusive: true,
                    centerOnMap: true,
                    zoomLevel: 12
                },
                popupConfig: {
                    offset: 15,
                    show: true,
                    className: "single-search",
                    closeBox: true
                }
            });

            // Map#addControl takes an optional second argument to set the position of the control.
            // If no position is specified the control defaults to `top-right`.

            map.addControl(ctrl, "top-left");
        </script>
    </body>
</html>
Last updated April 27, 2021.