Unlocking the Secret to Rotating a GroundOverlay on Google Maps

Question

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

I am currently working on a map project that involves adding shapes and locations onto the map and saving it.

However, I am encountering an issue with groundoverlay rotation.

Even though there is no built-in rotation property in the Google Maps documentation, I am looking for a way or trick to rotate the groundoverlay image using a different method.

Here's the code snippet:

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 utilizing a slider to rotate the overlay.

$("#overlayslider").slider().on('slide',function(e){
     var angle = e.newVal;
     // I aim to rotate the overlay by the specified angle as per the slider
})

I have attempted to use projection but without success.

Any possible solutions or assistance would be greatly appreciated.

Your help is invaluable, thank you.

jquery css google-maps google-maps-api-3

Answer 1

Answer №1

To achieve this effect, you can create a unique custom overlay: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple.

In the USGSOverlay.prototype.onAdd function, add an event listener to the overlay slider and then adjust the rotation of the div based on user input.

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

Check out the updated custom overlay example here: https://jsfiddle.net/b0tLd46u/4/. You can now control the rotation of the overlay using the range slider located above the map.

Answer 2

To achieve this effect, you can create a unique custom overlay: https://developers.google.com/maps/documentation/javascript/examples/overlay-simple.

In the USGSOverlay.prototype.onAdd function, add an event listener to the overlay slider and then adjust the rotation of the div based on user input.

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

Check out the updated custom overlay example here: https://jsfiddle.net/b0tLd46u/4/. You can now control the rotation of the overlay using the range slider located above the map.

Answer 3

Answer №2

Here is a customized solution inspired by 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 the image div property.
    this.div = null;
  }

  onAdd() {
    const div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    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;

    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  draw() {
    const overlayProjection = this.getProjection();
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

    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)';
  };

  onRemove() {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  };
};

map-component.ts

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

Answer 4

Here is a customized solution inspired by 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 the image div property.
    this.div = null;
  }

  onAdd() {
    const div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';

    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;

    const panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };

  draw() {
    const overlayProjection = this.getProjection();
    const sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
    const ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());

    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)';
  };

  onRemove() {
    this.div.parentNode.removeChild(this.div);
    this.div = null;
  };
};

map-component.ts

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

Unlocking the Secret to Rotating a GroundOverlay on Google Maps

Answer №1

Answer №2

Similar questions

How can I efficiently transfer a JavaScript array to a PHP script using the GET method?

Adjusting CSS using JQuery based on scroll position

Script tag causing browser to send unwanted request

Retrieve information from MySQL database with jQuery upon button click

Swap out original source files in HTML with minified versions

Search for text in multiple tables using jQuery and automatically trigger a button click event when the text is found

What could be causing me to have to click the button twice in order to view my dropdown list? Any suggestions on how to

JavaScript implementation of a carousel slider with responsive design

What causes $(this) to stop functioning post successful execution?

When attempting to bind various data to a single div using knockout js, the issue of duplicate records appearing arises

Having trouble retrieving data from the json file

What is the reason that `font-size` does not match the `height`? For example, if the `<span>` on the left is 2rem, on the right I could fit 2 smaller `<span>`s, each with a size of 1rem

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Is it feasible to dynamically insert and delete elements in React?

Disable a tab or menu item if the bean's boolean value is 'false'

How can you spot the conclusion of different lines that refuse to remain in place?

If a span element is present, apply a specific class to the corresponding

Establishing a pre-defined value for a filter that impacts an HTML table upon the page's initialization

The listbox is experiencing display issues when viewed in the Chrome browser

Managing the clearance of an absolutely positioned div with CSS