I am trying to overlay an image onto a Google Map and I am using the instructions found here:
https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple
When I try using the 'heading' attribute, the map correctly rotates, however, so does the image. I have tried using an image transform to rotate the picture, but I end up with a white box on the map.
Below is my javascript
let historicalOverlay;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 24.960864, lng: 55.150841 },
zoom: 16,
tilt: 47.5,
heading: 120,
mapId: "90f87356969d889c",
});
const imageBounds = {
north: 24.9717265,
south: 24.9500015,
east: 55.161841,
west: 55.139841,
};
historicalOverlay = new google.maps.GroundOverlay("https://res.cloudinary.com/defmmlrqg/image/upload/a_120/v1646695548/test/img32_iidhie.jpg", imageBounds);
historicalOverlay.setMap(map);
}
And this is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Tilt and Rotation</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta&channel=2" async></script>
</body>
</html>
Don't use the rotation by url with the "a_120" part on the URL. You're image don't really rotate with this method. You need to use custom overlay. In the exemple in the previous link, to rotate you're image, modify the draw method of the custom overlay class by adding something like
this.div_.style.transform = 'rotate(120deg)';
Take a look at this post for more infos.