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 marker image on google map in some degree.

i am using above code it is nice but it is showing FORWARD_OPEN_ARROW by the code of path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, but i want add a image here instead of arrow

such as car image so it can be rotate when vehicle move in some direction. i have a degree of rotation so is there any way to put image instead of arraow

score 5 · Answer 1 · answered Apr 25 '13 at 10:02

5

You're using a Symbol object for your icon in that example. Instead you can use an Icon object.

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

It doesn't include a rotation attribute however. Instead I'd assume you'd have multiple sprites, so you update that URL to use a particular image to represent different degrees of rotation, as required. e.g. you could have them named like "image0.jpg", "image45.jpg" and "image90.jpg", etc.

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

answered Apr 25 '13 at 10:02

duncan

31,401
13
78
99

2

thanks i already found it but my main aim is to rotate that icon image by some degree as i mentioned. actually i am using a car image and i want to rotate that image in according direction. – wild Apr 25 '13 at 10:16
did you guys find a solution other that declaring 360 images ? – Mehdi Sep 02 '18 at 22:37
Porbably the only solution which will work – Malik Bagwala Mar 18 '20 at 07:19

score -7 · Accepted Answer · answered Jan 02 '14 at 12:25

-7

try this

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


        });

answered Jan 02 '14 at 12:25

Satish Sharma

9,547
6
29
51

1

sorry but this isn't the right answer , you should do some research before posting a answer – nur farazi Nov 04 '15 at 11:28
i used it already in my project – Satish Sharma May 06 '16 at 12:22
It doesn't work and Icon object does not have a rotation attribute – Mehdi Sep 02 '18 at 22:39

Rotate google map marker image

2 Answers2