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