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

What is the best way to search for a CSS selector that includes an attribute beginning with the symbol '@'?

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Prevent hyperlink redirection based on specific condition using jQuery

The CSS Validator does not recognize the CSS pointer-events and appearance properties

Step-by-step guide on redirecting to a different page following a successful POST API call using Jquery

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

What is the best way to define relative paths for content like CSS files?

Stylish Material Design Icons

Is there a way for me to perfectly align the image and the h1 header on the webpage?

Using the combined power of CSS and jQuery to create dynamic visual effects based

Maintain the default material-ui class styles while making customizations to override others

Manage and update events in the Angular Bootstrap Calendar

Populate JQuery fields dynamically based on changing name elements

Table featuring identical submit buttons in each row: initial submit button is nonfunctional (potential issue with multiple identical IDs)

My website always fits on smaller resolution screens, but annoyingly, a horizontal scroll bar still appears

What steps can I take to prevent constantly re-fetching a disabled CSS file?

Having difficulty positioning breadcrumb items to float on the right side

My a:hover isn't functioning properly and my <a> tag is not redirecting to the link when clicked. Can anyone help me troubleshoot these issues?

How do I transform the date "Tue Nov 26 2019 16:00:00 GMT-0800" into the .NET JSON date format "/Date(1574812800000)/"?