How to rotate a marker in Google Maps? [duplicate]

Answer 1

You can use the following function to rotate an image, element is the image and degree is the angle you would like to rotate, zero is when an arrow is up to the north:

function (element, degree) {
    if (navigator.userAgent.match("Chrome")) {
       element.style.WebkitTransform = "rotate(" + degree + "deg)";
    }
    else if (navigator.userAgent.match("Firefox")) {
       element.style.MozTransform = "rotate(" + degree + "deg)";
    }
    else if (navigator.userAgent.match("MSIE")) {
       element.style.msTransform = "rotate(" + degree + "deg)";
    }
    else if (navigator.userAgent.match("Opera")) {
       element.style.OTransform = "rotate(" + degree + "deg)";
    }
    else {
       element.style.transform = "rotate(" + degree + "deg)";
    }
}

Best regards,

Chen

Answer 2

The API reference doesn't say anything specifically about how rotation is accomplished but since path takes an SVG-element I'd say thats how they manage to rotate it. If you create your custom marker using SVG it can be done quite easily using transform="rotate(deg centerX centerY").

Answer 3

rotation is available within the API. https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom

var icon = {
    ...
    path: '...',
    scale: 1,
    rotation: [degrees]
};

marker = new google.maps.Marker({
  map: [...],
  icon: icon,
  ...
});