Custom Map Type with Incorrect Event Listener
The addEventListener on the canvas does not work due to improper overlay layering (i.e., not using overlayMouseTarget). Not sure how to implement that on a per tile canvas.
HTML
<div id="map"></div>
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: "",v: "weekly"});
</script>
CSS
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
async function drawTest() {
await google.maps.importLibrary("maps");
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
minZoom: 3,
center: {lat: 38, lng: -5}
});
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function(tile, zoom, ownerDocument) {
const canvas = ownerDocument.createElement('canvas');
canvas.id = "canvas_" + tile.x + "," + tile.y;
canvas.width = 256;
canvas.height = 256;
canvas.addEventListener("mousemove", (e) => {
console.log(e);
});
return canvas;
};
map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
let positions = [
{tileX: 61, tileY: 48, pX:100, pY: 200},
{tileX: 62, tileY: 49, pX:231, pY: 180},
]
google.maps.event.addListener(map, 'tilesloaded', function() {
for (let i = 0; i < positions.length; i++) {
let canvas = document.getElementById("canvas_" + positions[i].tileX + "," + positions[i].tileY);
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(positions[i].pX, positions[i].pY, 10, 10);
}
});
}
drawTest();