Rotate Google Map Marker Image

Question

marker1 = new google.maps.Marker( { position: myLatlng, map: map, icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 2, rotation: degree } }); 

I am trying to rotate the marker image on a Google map to some extent.

I use the code above, this is good, but it shows the FORWARD_OPEN_ARROW code : google.maps.SymbolPath.FORWARD_OPEN_ARROW , but I want to add an image here instead of an arrow

for example, an image of a car, so it can be rotated when the car moves in a certain direction. I have a degree of rotation, so is there any way to put an image instead of arraow

Answer 1

try it

 marker1 = new google.maps.Marker( { position: myLatlng, map: map, icon: { url: "/path/to/your/image.jpg", scale: 2, rotation: degree } }); 

Answer 2

In this example, you are using the Symbol object. Instead, you can use the Icon object.

 icon: { url: "/path/to/your/image.jpg" } 

However, it does not include the rotation attribute. Instead, I would suggest that you have several sprites, so you will update this URL to use a specific image to represent different degrees of rotation, if necessary. for example, you could name them "image0.jpg", "image45.jpg" and "image90.jpg", etc.

Alternatively, you can continue to use the Symbol object, but you can specify the path using the SVG path designator .