0

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=YOUR_API_KEY&callback=initMap&v=beta&channel=2" async></script>
  </body>
</html>

https://jsfiddle.net/ef79tL45/21/

Yrll
  • 1,619
  • 2
  • 5
  • 19
el_M
  • 149
  • 15
  • I don't see any issues rotating the image with a css transform operation, however the image looks like "45 degree" imagery, which doesn't rotate but so well on the map. How did you attempt to rotate it? Do you have a "flat" image that would rotate better over the map? – geocodezip Mar 08 '22 at 00:58
  • Hi, no I dont have a flat image. The only one I have is with the tilt. The image is being served from Cloudinary and in the example I am rotating it with the "a_120" part on the URL (120 degrees) "https://res.cloudinary.com/defmmlrqg/image/upload/a_120/v1646695548/test/img32_iidhie.jpg" – el_M Mar 08 '22 at 05:22
  • possible duplicate of https://stackoverflow.com/q/52948764/11630806 – PaulCrp Mar 08 '22 at 12:24

1 Answers1

0

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.

PaulCrp
  • 624
  • 1
  • 8
  • 19