3

I am trying to rotate marker icon image but rotation angle doesn't seem to have any effect on the orientation of the icon image.

I found that giving svg path instead of image for marker would make the rotation work like intended.

But is there any way to make rotation work when using image?

jsfiddle of the issue

function updateMap(bearing) {
// var bearing = 135;

console.log(bearing);
var icon = marker.getIcon();
icon.rotation = bearing;
marker.setIcon(icon);

console.log(marker);
}
function initialize() {
   initMap({ Latitude:37.4419, Longitude: -122.1419});
}
devN
  • 832
  • 3
  • 10
  • 23
  • jsfiddle seem to work, what is the problem? – Matteo Errera Aug 03 '17 at 09:48
  • @MatteoErrera oops, I posted the wrong link. Edited it now. The issue is rotation has no effect on the car image – devN Aug 03 '17 at 09:56
  • Do you have a php server (hosting that permits php)? Then you use icon: {url: 'img.php?rot=135'}, then use the GD library (of php) to rotate the image by $_GET['rot'] degrees (135 in this case) – Emmanuel Delay Aug 03 '17 at 14:17
  • 1
    You cannot rotate a custom image. Reference https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation. Required. To do it you need to create image using SVG (Scalable Vector Graphics). – Saravana Aug 03 '17 at 14:40
  • [proof of concept fiddle](http://jsfiddle.net/geocodezip/Lay214fp/2/) (requires jQuery, but can be implemented without it) – geocodezip Aug 10 '17 at 21:06
  • 1
    updated [proof of concept fiddle](http://jsfiddle.net/geocodezip/Lay214fp/3/) – geocodezip Aug 10 '17 at 21:26

1 Answers1

1

You can't do this when you provide a URL for the image like that.

From the docs:

" If a string is provided, it is treated as though it were an Icon with the string as url."

And the Icon class hasn't got a rotate method. Only Symbol lets you do this.

duncan
  • 31,401
  • 13
  • 78
  • 99
  • I am using symbol icon for the marker but able to rotate the marker once initially but afterward, it remains as is when change its rotation value by props. Please help on my query at https://stackoverflow.com/q/51030431/3574669 – Ajay Jun 25 '18 at 19:17