JavaScript Maps SDK

Marker Styles

Marker styles change when you mouse over them. 

<!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%;
            }

            .cust-marker {
                width: 64px;
                height: 64px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>

        <script>
            // Marker styles change when mouse over or out.

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

            // Create a marker with a label on top of an icon
            const el = document.createElement('div');
            el.classList.add('cust-marker');
            el.title = 'Marker with a label and an icon';
            const htmlContent =
                '<div id="text">Green truck</div>' +
                '<div id="image" style="background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;"/>';
            el.innerHTML = htmlContent;
            const marker = new TrimbleMaps.Marker({
                draggable: false,
                anchor: 'top-left', // default: center, if width is too wide, you will see marker moves after zoom out.
                element: el
            }).setLngLat(center).addTo(map);

            function markerMouseOver(e) {
                let markerLabel = document.getElementById('text');
                markerLabel.innerHTML = 'Red truck';
                let image = document.getElementById('image');
                image.setAttribute(
                    'style',
                    'background: url(https://maps.alk.com/api/1.2/img/truck_red.png) no-repeat; height: 26px; width: 26px;'
                );
            };
            el.addEventListener('mouseover', markerMouseOver);

            function markerMouseOut(e) {
                let markerLabel = document.getElementById('text');
                markerLabel.innerHTML = 'Green truck';
                let image = document.getElementById('image');
                image.setAttribute(
                    'style',
                    'background: url(https://maps.alk.com/api/1.2/img/truck_green.png) no-repeat; height: 26px; width: 26px;'
                );
            }

            el.addEventListener('mouseout', markerMouseOut);

            // Create the 2nd marker
            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">1</text>' +
                '</svg>';
            const svgContent = document.createElement('div');
            svgContent.title = 'SVG content marker';
            svgContent.innerHTML = content;
            const marker2 = new TrimbleMaps.Marker({
                draggable: false,
                element: svgContent
            }).setLngLat([-87.0037998, 38.0022745]).addTo(map);

            let element = marker2.getElement();
            function marker2MouseOver(e) {
                //get marker elements by tag name
                let c = this.getElementsByTagName('circle')[0];
                let t = this.getElementsByTagName('text')[0];
                //change fill color
                c.setAttribute('fill', '#F00');
                //change text
                t.textContent = '2';
                t.innerHTML = '2';
            }
            let boundMarkerMouseOver = marker2MouseOver.bind(element);
            element.addEventListener('mouseover', boundMarkerMouseOver);

            function marker2MouseOut(e) {
                let c = this.getElementsByTagName('circle')[0];
                let t = this.getElementsByTagName('text')[0];
                c.setAttribute('fill', '#43A51B');
                t.textContent = '1';
                t.innerHTML = '1';
            }
            let boundMarkerMouseOut = marker2MouseOut.bind(element);
            element.addEventListener('mouseout', boundMarkerMouseOut);
        </script>
    </body>
</html>
Last updated August 23, 2024.