Eu sei que este post é um pouco antigo, mas eu vi tanta informação ruim sobre isso no SO que eu poderia gritar. Então, eu só preciso jogar meus dois centavos em uma abordagem totalmente diferente que eu sei que funciona, já que a uso de maneira confiável em muitos mapas. Além disso, acredito que o OP queria a capacidade de girar o marcador de seta ao redor do ponto do mapa também, o que é diferente de girar o ícone em torno de seu próprio eixo x, y, que mudará para onde o marcador de seta aponta no mapa.
Primeiro, lembre-se de que estamos brincando com o Google maps e SVG, então devemos acomodar a maneira como o Google implementa sua implementação de SVG para marcadores (ou, na verdade, símbolos). O Google define sua âncora para a imagem do marcador SVG em 0,0, que NÃO É o canto superior esquerdo do viewBox SVG. Para contornar isso, você deve desenhar sua imagem SVG de forma um pouco diferente para dar ao Google o que ele deseja ... sim, a resposta está na maneira como você realmente cria o caminho SVG em seu editor SVG (Illustrator, Inkscape, etc. .).
A primeira etapa é livrar-se do viewBox. Isso pode ser feito definindo viewBox em seu XML como 0 ... isso mesmo, apenas um zero em vez dos quatro argumentos usuais para viewBox. Isso desativa a caixa de visualização (e sim, isso é semanticamente correto). Você provavelmente notará que o tamanho da sua imagem pula imediatamente ao fazer isso, e isso porque o svg não tem mais uma base (o viewBox) para dimensionar a imagem. Portanto, criamos essa referência diretamente, definindo a largura e a altura para o número real de pixels que você deseja que a sua imagem esteja no editor XML do seu editor SVG.
Ao definir a largura e a altura da imagem SVG no editor XML, você cria uma linha de base para o dimensionamento da imagem e esse tamanho se torna um valor de 1 para as propriedades de escala do marcador por padrão. Você pode ver a vantagem que isso tem para o dimensionamento dinâmico do marcador.
Agora que você tem sua imagem dimensionada, mova a imagem até que a parte da imagem que você deseja ter como âncora esteja sobre as coordenadas 0,0 do editor SVG. Depois de fazer isso, copie o valor do atributo d do caminho svg. Você notará que cerca de metade dos números são negativos, que é o resultado do alinhamento de seu ponto de ancoragem para 0,0 da imagem em vez de viewBox.
Usar essa técnica permitirá que você gire o marcador corretamente, ao redor do ponto lat e lng no mapa. Esta é a única maneira confiável de vincular o ponto no marcador SVG que você deseja à latitude e longitude da localização do marcador.
Tentei fazer um JSFiddle para isso , mas há algum bug na implementação, um dos motivos pelos quais não gosto tanto de código reinterpretado. Então, em vez disso, incluí um exemplo totalmente independente abaixo que você pode experimentar, adaptar e usar como referência. Este é o mesmo código que tentei no JSFiddle que falhou, mas ele navega pelo Firebug sem um gemido.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Drew G. Stimson, Sr. ( Epiphany )" />
<title>Create Draggable and Rotatable SVG Marker</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<style type="text/css">
#document_body {
margin:0;
border: 0;
padding: 10px;
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: bold;
color: #f0f9f9;
text-align: center;
text-shadow: 1px 1px 1px #000;
background:#1f1f1f;
}
#map_canvas, #rotation_control {
margin: 1px;
border:1px solid #000;
background:#444;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#map_canvas {
width: 100%;
height: 360px;
}
#rotation_control {
width: auto;
padding:5px;
}
#rotation_value {
margin: 1px;
border:1px solid #999;
width: 60px;
padding:2px;
font-weight: bold;
color: #00cc00;
text-align: center;
background:#111;
border-radius: 4px;
}
</style>
<script type="text/javascript">
var map, arrow_marker, arrow_options;
var map_center = {lat:41.0, lng:-103.0};
var arrow_icon = {
path: 'M -1.1500216e-4,0 C 0.281648,0 0.547084,-0.13447 0.718801,-0.36481 l 17.093151,-22.89064 c 0.125766,-0.16746 0.188044,-0.36854 0.188044,-0.56899 0,-0.19797 -0.06107,-0.39532 -0.182601,-0.56215 -0.245484,-0.33555 -0.678404,-0.46068 -1.057513,-0.30629 l -11.318243,4.60303 0,-26.97635 C 5.441639,-47.58228 5.035926,-48 4.534681,-48 l -9.06959,0 c -0.501246,0 -0.906959,0.41772 -0.906959,0.9338 l 0,26.97635 -11.317637,-4.60303 c -0.379109,-0.15439 -0.812031,-0.0286 -1.057515,0.30629 -0.245483,0.33492 -0.244275,0.79809 0.0055,1.13114 L -0.718973,-0.36481 C -0.547255,-0.13509 -0.281818,0 -5.7002158e-5,0 Z',
strokeColor: 'black',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#fefe99',
fillOpacity: 1,
rotation: 0,
scale: 1.0
};
function init(){
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: map_center,
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID
});
arrow_options = {
position: map_center,
icon: arrow_icon,
clickable: false,
draggable: true,
crossOnDrag: true,
visible: true,
animation: 0,
title: 'I am a Draggable-Rotatable Marker!'
};
arrow_marker = new google.maps.Marker(arrow_options);
arrow_marker.setMap(map);
}
function setRotation(){
var heading = parseInt(document.getElementById('rotation_value').value);
if (isNaN(heading)) heading = 0;
if (heading < 0) heading = 359;
if (heading > 359) heading = 0;
arrow_icon.rotation = heading;
arrow_marker.setOptions({icon:arrow_icon});
document.getElementById('rotation_value').value = heading;
}
</script>
</head>
<body id="document_body" onload="init();">
<div id="rotation_control">
<small>Enter heading to rotate marker </small>
Heading°<input id="rotation_value" type="number" size="3" value="0" onchange="setRotation();" />
<small> Drag marker to place marker</small>
</div>
<div id="map_canvas"></div>
</body>
</html>
Isso é exatamente o que o Google faz pelos seus próprios poucos símbolos disponíveis na classe SYMBOL da API do Google Maps, então se isso não convence você ... De qualquer forma, espero que isso ajude você a fazer e configurar corretamente um marcador SVG para seus esforços do Google Maps.