https://www.tigerbond.com/scripts/controls/control.simple-map.js?d=d2a120ee98322cd1e0a022c79b44fc50019e0147

1document.addEventListener(
2    "DOMContentLoaded", () => {
3
4        const mapMarkers = document.querySelectorAll('.svg-marker');
5
6        document.querySelectorAll('.svg-marker').forEach(function (mapMarker, i) {
7            mapMarker.addEventListener('click', function (event) {
8                event.preventDefault();
9
10                var locationId = mapMarker.dataset.locId;
11                var officeListItem = document.querySelector('.office-list-item[data-loc-id="' + locationId + '"]');
12
13                // Remove all office details active states
14                document.querySelectorAll('.office-list-item.active').forEach(function (officeItem, m) {
15                    officeItem.classList.remove('active');
16                });
17                
18                // Remove all markers active states
19                document.querySelectorAll('.svg-marker').forEach(function (marker, m) {
20                    marker.classList.remove('selected');
21                });
22
23                // Add the active states
24                officeListItem.classList.add('active');
25                mapMarker.classList.add('selected');
26            });
27        });
28
29        document.querySelectorAll('.office-list-mobile .office-list-item').forEach(function (item, i) {
30            var officeName = item.querySelector('.office-name');
31
32            officeName.addEventListener('click', function (event) {
33                event.preventDefault();
34
35                // Remove all markers active states
36                document.querySelectorAll('.svg-marker').forEach(function (marker, m) {
37                    marker.classList.remove('selected');
38                });
39
40                // Get the marker ID
41                var locationId = item.dataset.locId;
42
43                // Remove all active states from current office item
44                for (let sibling of item.parentNode.children) {
45                    if (sibling !== item) sibling.classList.remove('active');
46                }
47
48                // Add the active states
49                item.classList.add('active');
50
51                var svgMarkerSelected = document.querySelector('.svg-marker[data-loc-id="' + locationId + '"]');
52                svgMarkerSelected.classList.add('selected');
53                
54            });
55        });
56});