rotate a .gif image on google maps api v3?

Question

I find lots of answers on this question but not one that works when using .gif images and not markers. To use .gif images (and also animated gifs) I use code (which works)<

Answer 1

Another way to do it is to use Custom Overlay.

    .
    .
    var overlay = new google.maps.OverlayView();
    overlay.draw = function() {
        this.getPanes().markerLayer.id = 'markerLayer';
    }
    overlay.setMap(map);
    .
    .
    var deg = 270;
    document.querySelector("#markerLayer img").style.transform = 'rotate(' + deg + 'deg)';
    .

See this demo pen for more clarity.

Answer 2

The "store_id" property of the marker doesn't give you access to the DOM element which contains the image. If you have a unique icon for each marker, you can grab it using its URL with JQuery, then apply a CSS transform to it:

$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
  'transform': 'rotate(45deg)'
});

Note: this will only work for markers with optimized: false

• proof of concept fiddle
• proof of concept fiddle rotating a .png image

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.47949, -122.083168),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var image = {
    url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
    size: new google.maps.Size(75, 75),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32),
    scaledSize: new google.maps.Size(50, 50)
  };
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: image,
    store_id: "mkrID",
    optimized: false
  });
  var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
      $('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)'
      });
      rotationAngle += 10;
    }, 1000);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>