Rotate image of marker google maps not working

Navigation
0

Well I need to rotate the icon image according to the header that arrives for me.

I'm trying to make several forms but none of them worked, let's go to the codes.

FIRST TRIAL

So the problem with this attempt is related to a svg with multiple paths rotate works perfectly.

SECOND TRY [SVG URL] 

this.marker = new google.maps.Marker({
  position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
  map: this.map,
  optimized: false,
  icon: {
    url: 'assets/img/maps/if_map-marker_299087.svg',
    anchor: new google.maps.Point(0, 0),
    size: new google.maps.Size(32, 32)
  },
});

In this option my problem is when I'm going to apply path to the image, I'm doing this: 

document.querySelector('.gmnoprint img').setAttribute('style', 'transform:rotate(-134deg);');

but it is not working as it should. It adds everything right in the html but at the moment of getting the command it stays as if the background of the image has been rotating but remained in the same place; In the image on the side we can see the blue square (when I place the mouse over the image) and the image itself, the square is rotating but the image does not.

THIRD TRYING [IMG URL]

In this attempt I used the same methods of try 2 using png image, the result was the same.

PROJECT INFORMATION 

@angular: 5.0.2
@types/googlemaps: 3.30.0
typescript: ^2.6.1
    
asked by anonymous 29.11.2017 / 14:51

1 answer

0

There was a JS lib named MarkerWithlabel where you could assign an image as a marker, and even type text over the image. In your case, you can use any image, if you rotate the image of that marker and assign it in the icon attribute of the variable marker (from the example below) I think it works the way you want it.

You can use this Non-Official documentation to see

Its use was basically: 

 var marker = new MarkerWithLabel({
   position: homeLatLng, // usa o 'new google.maps.LatLng()'
   draggable: true,  // true or false
   map: map,   // mapa que vai receber o marcador
   labelContent: "$425K",  // Texto em cima da imagem
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75},
   icon: 'img/markers/marker_patrol.png' // SUBSTITUI A IMAGEM AQUI
 });
    
29.11.2017 / 15:12
md-dialog - Angular How to get aws service with aws-sfk-php-zf2 v 2.0. *?