Google map: How to rotate `groundoverlay` need trick

Question

I'm making map project for use like adding shapes and location on map and save it.

but i'm getting problem with groundoverlay.

i know there is no property exist for rotation in google map document. but i need a way/trick to rotate groundoverlay image, by any other way.

here code

var srcImage = "http://demo/image/uploads/demo.jpg";
var bounds = {
    north: 44.599,
    south: 44.490,
    east: -78.443,
    west: -78.649
}
var overlay = new google.maps.GroundOverlay(srcImage ,bounds);
overlay.setMap(map);

i am using slider for rotate overlay.

$("#overlayslider").slider().on('slide',function(e){
     var angle = e.newVal;
     // i want rotate overlay by angle/degree as per slider
})

I have tried with projection but no success.

Any posible way will be appreciate.

Any help will be useful, thank you.

Please add comments for down vote reason. and how to fix that. — Subhash Chavda, Oct 23 '18 at 12:32
Try `overlay.setBearing(120);` where 120 is the angle of rotation (between 0 and 360), this should rotate the overlay. Example: https://github.com/ionic-team/ionic-native-google-maps/tree/master/documents/groundoverlay/setBearing — elveti, Oct 23 '18 at 12:57
That function does not exist: `Uncaught (in promise) TypeError: historicalOverlay.setBearing is not a function`. — Daniël Visser, Oct 23 '18 at 13:40
`overlay.setBearing(120)` this is not working with default google map functionality, for this i need to create custom programming. — Subhash Chavda, Oct 23 '18 at 14:00

score 5 · Accepted Answer · answered Oct 23 '18 at 13:18

You can achieve this by using a custom overlay: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple.

Add an event listener to the overlay slider in USGSOverlay.prototype.onAdd and then set the rotation of the div on input.

document.getElementById('overlayslider').addEventListener('input', function() {
    div.style.transform = 'rotate(' + this.value + 'deg)';
});

And here is the modified custom overlay example: https://jsfiddle.net/b0tLd46u/4/. You can set the rotation of the overlay by the range slider above the map.

Is custom overlay possible in android or ios or in Flutter? – Jaimin Modi Feb 02 '23 at 12:51 — Jaimin Modi, Feb 02 '23 at 12:51

score 0 · Answer 2 · answered Jul 13 '20 at 19:28

Here is my solution mostly inspirered from This Answer

rotated-overlay.ts

export class CustomOverlay extends google.maps.OverlayView {
  private div;

  constructor(
    private bounds: google.maps.LatLngBounds,
    private image: string,
    private rotation: number
  ) {
    super();

    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div = null;
  }

  /**
   * onAdd is called when the map's panes are ready and the overlay has been
   * added to the map.
   */
  onAdd() {
    const div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    // Create the img element and attach it to the div.
    const img = document.createElement('img');
    img.src = this.image;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);

    this.div = div;

    // Add the element to the "overlayLayer" pane.
    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  draw() {

    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    const overlayProjection = this.getProjection();

    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

    // Resize the image's div to fit the indicated dimensions.
    const div = this.div;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
    div.style.transform = 'rotate(' + this.rotation + 'deg)';
  };

  // The onRemove() method will be called automatically from the API if
  // we ever set the overlay's map property to 'null'.
  onRemove() {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  };
};

map-component.ts

public addOverlay(imageUrl: string, rotation: number, bounds: google.maps.LatLngBounds, map: google.maps.Map){
  let overlay = new CustomOverlay(
    bounds,
    imageUrl,
    rotation,
    
  );
  overlay.setMap(map);
}

Google map: How to rotate `groundoverlay` need trick

2 Answers2

Linked

Related