<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.8.0.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.APIKey = '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>