JavaScript Maps SDK

Custom HTML Marker

Customize a marker with an icon, label, tooltip, SVG icon or SVG content. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.js"></script>
        <style>
            body { margin: 0; padding: 0; }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            .marker-label {
                cursor: pointer;
            }

            .marker-image {
                background-image: url('https://maps.alk.com/api/1.2/img/truck_green.png');
                background-repeat: no-repeat;
                width: 26px;
                height: 26px;
                cursor: pointer;
            }

            #marker {
                background-image: url('https://developer.trimblemaps.com/img/trimble-maps-division-logo.svg');
                width: 34px;
                height: 34px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            // When a marker is added to a map, it does not append to the map canvas. It is fine for a marker to have SVG icon or content.
            // Markers are DIV DOM elements. More of them on a web page will impact the performance.

            TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
            const center = [-87, 38];
            const map = new TrimbleMaps.Map({
                container: 'map', // container id
                center: center,
                zoom: 14
            });

            // Create a marker with a label on top of an icon.
            const el = document.createElement('div');
            el.id = 'container';
            el.title = 'Marker with a label and an icon';
            const divLabel = document.createElement('div');
            divLabel.innerHTML = 'Green truck';
            divLabel.className = 'marker-label';
            el.appendChild(divLabel);
            const divIcon = document.createElement('div');
            divIcon.className = 'marker-image';
            el.appendChild(divIcon);
            const marker = new TrimbleMaps.Marker({
                // draggable: true,
                element: el
            }).setLngLat(center).addTo(map);

            // Create a marker with SVG content
            const content = '<svg width="34" height="34" xmlns="http://www.w3.org/2000/svg">' +
                '<circle id="svgCircle" stroke="#FFF" fill="green" cx="16" cy="16" r="16" />' +
                '<text id="svgText" name="stopNumber" x="16" y="20" font-size="8pt" font-family="arial" font-weight="bold" text-anchor="middle" fill="#FFF" textContent="1">Stop#</text>' +
                '</svg>';
            const svgContent = document.createElement('div');
            svgContent.title = 'SVG content marker';
            svgContent.innerHTML = content;
            const marker2 = new TrimbleMaps.Marker({
                // draggable: true,
                element: svgContent
            }).setLngLat([-87.0037998, 38.0022745]).addTo(map);

            // Create a marker with SVG as background image
            const divElement = document.createElement('div');
            divElement.id = 'marker';
            divElement.title = 'SVG image as background';
            const marker3 = new TrimbleMaps.Marker({
                element: divElement
            }).setLngLat([-86.999998, 38.0052745]).addTo(map);
        </script>
    </body>
</html>
Last updated August 23, 2024.