Bom estou precisando rodar a imagem do icone de acordo com o header que chega para mim.
Estou tentando fazer de varias formar porém nenhuma delas funcionou, vamos la aos códigos.
PRIMEIRA TENTATIVA [PATH DO ICONE]
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)
},
})
Esta maneira funcionou porém o svg
que preciso é complexo, ele tem mais de um path
, se eu consegui-se junta-los em um path
apenas, seria interessantíssimo e tudo funcionaria como precisava.
Então o problema desta tentativa é referente a um svg com vários paths o rotate funciona perfeitamente.
SEGUNDA TENTATIVA [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)
},
});
Nesta opção meu problema está quando vou aplicar o rotate
na imagem, estou fazendo assim:
document.querySelector('.gmnoprint img').setAttribute('style', 'transform:rotate(-134deg);');
porém não está funcionando como preciso. Ele adiciona tudo certo no html mas no momento de pegar o comando fica como se o fundo da imagem tive-se girando mas permanecesse no mesmo local; Na imagem do lado podemos ver o quadrado de azul (quando coloco o mouse em cima da imagem) e a imagem em si, o quadrado está rodando porém a imagem não.
TERCEIRA TENTATIVA [URL IMG]
Nesta tentativa utilizei os mesmo métodos da tentativa 2 utilizando imagem em png, o resultado foi o mesmo.
INFORMAÇÕES DO PROJETO
@angular: 5.0.2
@types/googlemaps: 3.30.0
typescript: ^2.6.1