23

Following is the code to rotate a marker, but how to rotate a custom marker. Any Idea?

var angleDegrees = 150;
new google.maps.Marker({
    position: a,
    map: map,
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 6,
        fillColor: "red",
        fillOpacity: 0.8,
        strokeWeight: 2,
        rotation: angleDegrees //this is how to rotate the pointer
    }  
});
Attila O.
  • 15,659
  • 11
  • 54
  • 84
sms247
  • 4,404
  • 5
  • 35
  • 45

3 Answers3

25

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,
  ...
});
Kyle
  • 376
  • 3
  • 5
  • 7
    That works only for custom symbols in SVG format and with therefore a path – Jonny Sep 08 '18 at 11:25
  • To update rotation on an existing icon, you need to call the setter, e.g. `myMarker.icon.rotation++;myMarker.setIcon(myMarker.icon)` – Sam Barnum Jun 08 '22 at 16:50
4

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").

Karl-Johan Sjögren
  • 16,544
  • 7
  • 59
  • 68
  • 1
    Thanks, I found this **The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation.** – sms247 Sep 23 '13 at 05:03
  • 1
    Precisely, so you could add your own SVG-symbols using that. HEre is an example of the syntax needed. http://stackoverflow.com/questions/13125289/how-do-i-indicate-transparency-in-an-svg-path-in-google-maps-api-v3 – Karl-Johan Sjögren Sep 23 '13 at 05:29
  • 1
    Is there no other method we can rotate any custom image? in the above example you can write url: 'path' of custom image but its not rotating. – Salman Sep 25 '13 at 02:17
  • There are a few ways that come to mind, mostly using [canvas](http://stackoverflow.com/questions/18951711/how-to-rotate-a-marker-in-google-maps/18951899?noredirect=1#comment28061537_18951899) or [css3 transforms](http://davidwalsh.name/css-transform-rotate) but the support in browsers (older ones in particular) varies quite a bit. – Karl-Johan Sjögren Sep 25 '13 at 05:56
0

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

Chen
  • 148
  • 1
  • 10