Currently, I am using a workaround to rotate a custom image marker in Google Maps.
The issue I am encountering is regarding sizing. For example, if my PNG image is 400px wide and 200px high.
When rotating the image so the width becomes vertical, it gets cut off.
I am unsure how to fit the image within the bounds. Initially, I thought of pseudo code like this but couldn't make it work:
const image = currentImage;
if(image.width > image.height){
//make bounding box of marker image.width squared
} else{
//make bounding box of marker image.height squared
}
For reference, here is my rotation function:
function rotate() {
const images = $("#map").find("img").get();
for (let i = 0; i < images.length; i++) {
if ($(images[i]).attr("src").replaceAll(window.location.origin, "") === currentMarker.itemSrc) {
$(images[i]).css({
'transform': 'rotate(' + currentDeg + 'deg)',
});
break;
}
}
}
This is how I add a marker: (ignore the custom fields I added)
const markerIcon = {
url: currentImage.src + "#" + allMarkers.length,
// size: new google.maps.Size(?, ?),
// origin: new google.maps.Point(?, ?),
// anchor: new google.maps.Point(?, ?)
};
const marker = new google.maps.Marker({
position: mapsMouseEvent.latLng,
map: map,
draggable: true,
icon: markerIcon,
itemSrc: currentImage.src.replaceAll(window.location.origin, "") + "#" + allMarkers.length,
id: lat + "," + lng,
optimized: false
});