Skip to main content

Custom HTML Marker

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

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="" />
        <script src=""></script>
            body { margin: 0; padding: 0; }

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

            .marker-label {
                cursor: pointer;

            .marker-image {
                background-image: url('');
                background-repeat: no-repeat;
                width: 26px;
                height: 26px;
                cursor: pointer;

            #marker {
                background-image: url('');
                width: 34px;
                height: 34px;
                cursor: pointer;
        <div id="map"></div>

            // 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.APIKey = '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');
   = 'container';
            el.title = 'Marker with a label and an icon';
            const divLabel = document.createElement('div');
            divLabel.innerHTML = 'Green truck';
            divLabel.className = 'marker-label';
            const divIcon = document.createElement('div');
            divIcon.className = 'marker-image';
            const marker = new TrimbleMaps.Marker({
                // draggable: true,
                element: el

            // Create a marker with SVG content
            const content = '<svg width="34" height="34" xmlns="">' +
                '<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>' +
            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');
   = 'marker';
            divElement.title = 'SVG image as background';
            const marker3 = new TrimbleMaps.Marker({
                element: divElement
            }).setLngLat([-86.999998, 38.0052745]).addTo(map);
Last updated June 15, 2023.