Anyone knows how to rotate icon?

JavaScript
1

Hi, I am having problem on my icon in google map,…I want to rotate it but i could not find solution on how to rotate the icon

var rotatevalue = 215;//let says i want to rotate my marker at this given value.


   for (var i = 0; i < pointsdata.length; i++) {
                       marker1 = new MarkerWithLabel({
                          position: new google.maps.LatLng(pointsdata[i].split(",")[0],pointsdata[i].split(",")[1]),
                          map: map,
                          icon: 'foldericon/'+myicon[i].split(","),
                          labelAnchor: new google.maps.Point(22, 0),
                          labelClass: "myclass",
                          labelStyle: {opacity: 1.0}



                      });

Thank you in advance.

2

A custom icon image cannot be rotated. If you want to rotate an icon then you will need to create it using SVG instead.

Here’s some good documentation on Google map symbols, and here’s one on [URL=“https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-custom”]overlaying custom symbols on a map.

3

Thank you paul, I will try this.

4

I found this but i am confuse how to get this work
http://stackoverflow.com/questions/6800613/rotating-image-marker-image-on-google-map-v3

5

Is the documentation from google about their own maps API any easier for you to follow?

6

Hi paul, I tried the google map symbol https://developers.google.com/maps/documentation/javascript/symbols#predefined
and it works fine,but i need an icon that like car,person,that can be rotated just like the predefined icon in google map.

Thank you in avdvance.

7

Well done - so all you need is a SVG car or person now. It shouldn’t be all that hard to source something like that.
And if all else fails, you can create your own SVG images using this SVG editor too.

8

Hi paul,

Thank you so much for this editor…by the way is it possible to convert my png image car to svg then use it in google maps then it can be rotated also?

Thank you in advance.

9

Yes, that is definitely something that can be done. You can have the image available in a separate window, and use the SVG editor to recreate it as a new image.

10

Hi paul, i tried to convert my png to svg but the image is turns to black…what if we use the jqueryrotate plugin?..but the problem is that it requires an id element for IMG and for creating my icon marker in google map it has no id…I need to create an id to this marker dynamically so that i can rotate it…this is just my idea but i don’t know this will gonna work.


  iconmarker = new MarkerWithLabel({
                          position: new google.maps.LatLng(cords[i][0],cords[i][1]),
                          draggable: true,
                          raiseOnDrag: true,
                          map: map,
                          icon: 'images/'+icn[i],
                          labelContent: clientname[i],
                          labelAnchor: new google.maps.Point(22, 0),
                          labelClass: "markerclass",
                          labelStyle: {opacity: 1.0}

                      });

can you please look at this example http://www.goprotravelling.com/..i think it uses an icon,there is a man walking,car and mortcyle.

11

Yes, they use an image, and an important aspect too is that they don’t use the google API.

You have two choices now - you can approach goprotravelling about the mapping solution that they have in place, or if you want to come back to using the google API you can come back to creating an SVG image using their easy to use SVG editor.

12

Hi paul,Thank you, I thought goprotravelling is using google map…I thinks i will just stick to google map.,but that’s my i can’t get my car to svg it turns to black…i keep trying in creating the svg but no luck .

13

Well then, this is a good time to realise that it’s best to take things in to your own hands and do it yourself. Get your artsy hat on and use the SVG editor to create the car from scratch.

14

Hello paul,can svg can copy the color of my car?

15

You can make it any color you want. Afterall, look at these SVG cars - some of them get pretty damn fancy.

16

Hi paul,thank you for this…but i think google map will not allow the multiple colors,because it only use the fillColor of the icon.
under the

google.maps.Symbol object specification

17

Hi paul, I inspect the element i found out that google map create img tag for my icon



<img style="position: absolute; left: 0px; top: 0px; -moz-user-select: none; width: 48px; height: 48px; border: 0px none; padding: 0px; margin: 0px;" src="img/mycar.png" draggable="false">

Is that possible now to put an id attribute on the img tag and use the https://code.google.com/p/jqueryrotate/ ?

in my code


 inside the forloop
    iconmarker = new MarkerWithLabel({
                          position: new google.maps.LatLng(cords[i][0],cords[i][1]),
                          draggable: true,
                          raiseOnDrag: true,
                          map: map,
                          icon: 'images/'+icn[i],
                          labelContent: clientname[i],
                          labelAnchor: new google.maps.Point(22, 0),
                          labelClass: "markerclass",
                          labelStyle: {opacity: 1.0}

                      });

Thank you in advance.

18

Putting an id tag on it is still the wrong approach. If might be possible though be using $(‘img[src=“img/mycar.png”]’)