Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate a marker in Google Maps? [duplicate]

Tags:

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     }   }); 
like image 962
sms247 Avatar asked Sep 23 '13 04:09

sms247


2 Answers

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,   ... }); 
like image 144
Kyle Avatar answered Sep 28 '22 13:09

Kyle


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

like image 44
Karl-Johan Sjögren Avatar answered Sep 28 '22 12:09

Karl-Johan Sjögren