html2canvas google maps market labels disappear - z-index problem? - maps

Question

I have a problem with getting labels on image generated by html2canvas from google maps. I try to use latest html2canvas library, because the image quality is much better, but getting problems with labels. My search lead my to z-index issue, but I cannot handle it myself. Please advise
It's a working code: https://jsfiddle.net/84mcwt17/9/
Image with the problem https://pasteboard.co/IJKZ7Vf.png
html code:
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>
<div id="map" ></div>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>
JS code:
$(function() {
var map;
var latlng = new google.maps.LatLng(49.241943, -122.889318);
var myOptions = {
zoom: 12,
center: latlng,
fullscreenControl: false,
scale:1,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var positions = [
new google.maps.LatLng(49.241, -122.899318),
new google.maps.LatLng(49.242, -122.889318),
new google.maps.LatLng(49.243, -122.909318)
]
for (var pos of positions){
let marker = new google.maps.Marker({
position: pos,
map: map,
optimized: false,
draggable:true,
label:'1',
});
marker.setMap(map);
}
$("#btnSave").click(function() {
addMapBase64();
}); });
function addMapBase64() {
var target = document.getElementById("map");
html2canvas(target, {
useCORS: true
})
.then(function (canvas) {
var canvasImg = canvas.toDataURL("image/png");
console.log(canvasImg);
$('#img-out').html('<img src="' + canvasImg + '" alt="">');
document.getElementById("id_map_base64").value = canvas.toDataURL('image/png');
})
.catch(function (err) {
console.log(err);
});
}
css
#map {
width: 300px;
height: 200px;
}

Answer 1

adding 'zIndex: 0' to markers solved the issue
let marker = new google.maps.Marker({
position: pos,
map: map,
optimized: false,
draggable:true,
label:'1',
zIndex: 0
});