Je sais que ce post est un peu vieux, mais j'ai vu tellement de mauvaises informations à ce sujet à SO que je pourrais crier. Donc, je dois juste jeter mes deux cents avec une approche totalement différente qui, je sais, fonctionne, car je l'utilise de manière fiable sur de nombreuses cartes. En plus de cela, je pense que l'OP voulait également la possibilité de faire pivoter le marqueur de flèche autour du point de la carte, ce qui est différent de la rotation de l'icône autour de son propre axe x, y qui changera l'endroit où le marqueur de flèche pointe sur la carte.
Tout d'abord, rappelez-vous que nous jouons avec Google maps et SVG, nous devons donc nous adapter à la manière dont Google déploie son implémentation de SVG pour les marqueurs (ou en fait les symboles). Google fixe son ancre pour l'image du marqueur SVG à 0,0, qui N'EST PAS le coin supérieur gauche de la zone de visualisation SVG. Pour contourner cela, vous devez dessiner votre image SVG un peu différemment pour donner à Google ce qu'il veut ... oui la réponse est dans la façon dont vous créez réellement le chemin SVG dans votre éditeur SVG (Illustrator, Inkscape, etc. .).
La première étape consiste à se débarrasser de la viewBox. Cela peut être fait en définissant la viewBox dans votre XML sur 0 ... c'est vrai, juste un zéro au lieu des quatre arguments habituels pour la viewBox. Cela désactive la zone d'affichage (et oui, c'est sémantiquement correct). Vous remarquerez probablement que la taille de votre image saute immédiatement lorsque vous faites cela, et c'est parce que le svg n'a plus de base (la viewBox) pour redimensionner l'image. Nous créons donc cette référence directement, en définissant la largeur et la hauteur sur le nombre réel de pixels que vous souhaitez que votre image soit dans l'éditeur XML de votre éditeur SVG.
En définissant la largeur et la hauteur de l'image svg dans l'éditeur XML, vous créez une ligne de base pour la mise à l'échelle de l'image, et cette taille devient une valeur de 1 pour les propriétés d'échelle du marqueur par défaut. Vous pouvez voir l'avantage que cela présente pour la mise à l'échelle dynamique du marqueur.
Maintenant que votre image est dimensionnée, déplacez l'image jusqu'à ce que la partie de l'image que vous souhaitez avoir comme ancre se trouve au-dessus des coordonnées 0,0 de l'éditeur svg. Une fois que vous avez fait cela, copiez la valeur de l' attribut d du chemin svg. Vous remarquerez qu'environ la moitié des nombres sont négatifs, ce qui est le résultat de l'alignement de votre point d'ancrage pour le 0,0 de l'image au lieu de la viewBox.
L'utilisation de cette technique vous permettra ensuite de faire pivoter correctement le marqueur, autour du point lat et lng sur la carte. C'est le seul moyen fiable de lier le point du marqueur svg que vous souhaitez à la lat et à la longueur de l'emplacement du marqueur.
J'ai essayé de créer un JSFiddle pour cela , mais il y a un bogue dans l'implémentation, l'une des raisons pour lesquelles je n'aime pas trop le code réinterprété. Au lieu de cela, j'ai inclus ci-dessous un exemple entièrement autonome que vous pouvez essayer, adapter et utiliser comme référence. C'est le même code que j'ai essayé chez JSFiddle qui a échoué, mais il navigue à travers Firebug sans un gémissement.
<!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>
C'est exactement ce que Google fait pour ses propres symboles disponibles dans la classe SYMBOL de l'API Maps, donc si cela ne vous convainc pas ... Quoi qu'il en soit, j'espère que cela vous aidera à créer et configurer correctement un marqueur SVG pour vos cartes Google endevours.