API Google Maps: SVG Marker se déplace par rapport à la carte lorsque vous zoom

J'ai créé deux marqueurs sur une carte, un marqueur standard, l'autre utilisant un chemin SVG. Le marqueur standard ne se déplace pas par rapport à la carte lorsque je diminue le zoom, mais le marqueur SVG le fait. Voici un violon où vous pouvez voir ce que je veux dire:

Http://jsfiddle.net/9A4ET/

Des idées sur la façon d'obtenir le marqueur SVG pour tenir sa place par rapport à la carte?

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SVG Marker Moves</title> <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script> <style> html, body, #map_canvas { height: 100%; margin: 0; } </style> </head> <body> <div id="map_canvas"></div> <script> var islandLoc = new google.maps.LatLng(48.692492,-122.908192); var birdLoc = new google.maps.LatLng(48.692615936699596, -122.90869625529479); var map = new google.maps.Map(document.getElementById('map_canvas'),{ zoom: 19, center: islandLoc, disableDefaultUI: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.SATELLITE }); var island_marker = new google.maps.Marker({ position: islandLoc, map: map }); var bird_icon = { path: "m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z", fillColor: '#000000', strokeColor: '#FFFFFF', fillOpacity: 1, strokeWeight: 1, scale:.15 } var bird_marker = new google.maps.Marker({ position: birdLoc, map: map, icon: bird_icon }); </script> </body> </html>

Vous devez définir l'ancre pour le symbole (pour un symbole, la valeur par défaut est le coin supérieur gauche, alors que la valeur par défaut pour une image est le centre inférieur)

Pour ce symbole spécifique, le point pour une ancre centrale inférieure serait d'environ 258,381

Demo: http://jsfiddle.net/a3LKP/5/

Explication du calcul de l'origine au centre inférieur (pour inkscape).

Supposons que vous n'avez pas créé le chemin (symbole) seul, créez un document SVG avec le chemin donné:

 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0"> <g> <path d="m130.90909,164l54.09091,-23c0,0 -2.09091,-45 31.90909,-46c34,-1 37,6 42,23c5,17 -30,56 -30,71c0,15 23,21 56,40c33,19 56,62 64,81c8,19 14,39 21,46c7,7 16,16 15.09091,16c-0.90909,0 -14.09091,7 -15,7c-0.90909,0 -37.09091,-23 -46.09091,-23c-9,0 -35,-6 -57,-15c-22,-9 -35,-21 -35.90909,-21c-0.90909,0 0.90909,18 -0.09091,27c-1,9 -5,27 -5.90909,27c-0.90909,0 -7.09091,-15 -7.09091,-20c0,-5 5,-19 4.09091,-19c-0.90909,0 -3.09091,-16 -4,-16c-0.90909,0 -12.09091,0 -13,0c-0.90909,0 2.90909,10 0.90909,17c-2,7 2,31 1.09091,31c-0.90909,0 -17.09091,14 -18,14c-0.90909,0 8.90909,-20 8,-20c-0.90909,0 -1.09091,-15 -2.09091,-20c-1,-5 -5,-22 -5.90909,-22c-0.90909,0 -15.09091,-9 -29.09091,-50c-14,-41 37,-86 39,-93c2,-7 -8,-19 -8.90909,-19c-0.90909,0 -59.09091,7 -59.09091,7z"/> </g> </svg>

Ouvrez ce document avec inkscape.

D'abord, allez dans la page File->document-properties->page pour déterminer la taille du document (pour moi c'est 1052.36px , je suppose que c'est la valeur par défaut)

Ensuite, cliquez sur le symbole pour le sélectionner, dans la barre de menus, vous devriez voir les propriétés de l'objet: X , Y , W (idth), ( H ) huit.

Pour moi, c'est maintenant:
Document-height: 1052.36
Objet-x: 130.909
Objet-y: 671.362
Largeur de l'objet: 254.155
Hauteur de l'objet: 286.093

Calcul du y du fond:
Soustraire l'objet-y du document-hauteur (1052-671 = 381 )

Calcul du x du centre:
Ajoute la moitié de la largeur des objets aux objets x (131+ (254/2) = 258 )

Donc, l'ancrage est new google.maps.Point(258,381)