Run image from google maps not working

Question

Well I need to run the icon image according to the header that comes for me.

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

FIRST ATTEMPT [PATH OF THE ICON]

 this.marker = new google.maps.Marker({
  position: new google.maps.LatLng(location.coords.latitude, location.coords.longitude),
  map: this.map,
  optimized: false,
  icon: {
    PATH: 'meu path',
    anchor: new google.maps.Point(0, 0),
    size: new google.maps.Size(32, 32)
  },
})

This way worked however the svg that need is complex, it has more than one path, if I managed to join them in one path just, it would be very interesting and everything would work out as needed.

So the problem of this attempt is related to a svg with several paths the Rotate works perfectly.

SECOND ATTEMPT [URL SVG]

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 will apply the rotate in the picture, I’m doing so:

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

but it’s not working as well as I need it to. It adds everything right in html but at the moment of taking the command it is as if the background of the image had been rotated but remained in the same place; In the image on the side we can see the blue square (when I put the mouse on top of the image) and the image itself, the square is rotating but the image is not.

THIRD ATTEMPT [URL IMG]

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

PROJECT INFORMATION

@angular: 5.0.2
@types/googlemaps: 3.30.0
typescript: ^2.6.1

Answer 1

There was a JS lib called Markerwithlabel where you could assign an image as a marker, and even type a text on top of the image. In your case, you can use any image, rotate the image of this marker and assign in the icon attribute of the variable Marker (of the example below) I think it works the way you want it to.

You can use this unofficial documentation to see

Its use basically was:

 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
 });