Sé que esta publicación es un poco vieja, pero he visto tanta mala información sobre esto en SO que podría gritar. Así que solo tengo que poner mis dos centavos en un enfoque completamente diferente que sé que funciona, ya que lo uso de manera confiable en muchos mapas. Además de eso, creo que el OP quería la capacidad de rotar el marcador de flecha alrededor del punto del mapa también, que es diferente a rotar el icono alrededor de su propio eje x, y que cambiará hacia donde apunta el marcador de flecha en el mapa.
Primero, recuerde que estamos jugando con mapas de Google y SVG, por lo que debemos adaptarnos a la forma en que Google implementa su implementación de SVG para marcadores (o en realidad símbolos). Google establece su ancla para la imagen del marcador SVG en 0,0, que NO ES la esquina superior izquierda del viewBox SVG. Para evitar esto, debe dibujar su imagen SVG de manera un poco diferente para darle a Google lo que quiere ... sí, la respuesta está en la forma en que realmente crea la ruta SVG en su editor SVG (Illustrator, Inkscape, etc. .).
El primer paso es deshacerse de viewBox. Esto se puede hacer configurando viewBox en su XML en 0 ... así es, solo un cero en lugar de los cuatro argumentos habituales para viewBox. Esto apaga el cuadro de vista (y sí, esto es semánticamente correcto). Probablemente notará que el tamaño de su imagen salta inmediatamente cuando hace esto, y eso se debe a que el svg ya no tiene una base (el viewBox) para escalar la imagen. Así que creamos esa referencia directamente, estableciendo el ancho y el alto en el número real de píxeles que desea que tenga su imagen en el editor XML de su editor SVG.
Al establecer el ancho y el alto de la imagen svg en el editor XML, crea una línea de base para escalar la imagen, y este tamaño se convierte en un valor de 1 para las propiedades de escala del marcador de forma predeterminada. Puede ver la ventaja que esto tiene para la escala dinámica del marcador.
Ahora que tiene el tamaño de su imagen, mueva la imagen hasta que la parte de la imagen que desea tener como ancla esté sobre las coordenadas 0,0 del editor svg. Una vez que haya hecho esto, copie el valor del atributo d de la ruta svg. Notará que aproximadamente la mitad de los números son negativos, que es el resultado de alinear su punto de anclaje para el 0,0 de la imagen en lugar del viewBox.
El uso de esta técnica le permitirá rotar el marcador correctamente, alrededor de los puntos lat y lng en el mapa. Esta es la única forma confiable de vincular el punto del marcador svg que desea a la latitud y longitud de la ubicación del marcador.
Intenté hacer un JSFiddle para esto , pero hay algún error en la implementación, una de las razones por las que no me gusta tanto el código reinterpretado. Entonces, en cambio, he incluido un ejemplo completamente autónomo a continuación que puede probar, adaptar y usar como referencia. Este es el mismo código que probé en JSFiddle que falló, pero navega a través de Firebug sin un 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>
Esto es exactamente lo que hace Google para sus propios símbolos disponibles en la clase SYMBOL de la API de Maps, así que si eso no te convence ... De todos modos, espero que esto te ayude a crear y configurar correctamente un marcador SVG para tus mapas de Google endevours.