Estoy tratando de superponer una imagen en un mapa de Google y estoy usando las instrucciones que se encuentran aquí:
https://developers.google.com/maps/documentation/javascript/examples/groundoverlay-simple
Cuando trato de usar el atributo 'título', el mapa gira correctamente, sin embargo, también lo hace la imagen. Intenté usar una transformación de imagen para rotar la imagen, pero termino con un cuadro blanco en el mapa.
A continuación se muestra mi 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); }Y este es mi 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>No utilice la rotación por URL con la parte "a_120" en la URL. Tu imagen realmente no gira con este método. Debe utilizar una superposición personalizada . En el ejemplo del enlace anterior, para rotar su imagen, modifique el método de draw de la clase de superposición personalizada agregando algo como
this.div_.style.transform = 'rotate(120deg)';Echa un vistazo a esta publicación para obtener más información.