Googleマップにsvgマーカーを正しく配置するにはどうすればよいですか？

Question

私はsvgマーカーを持っており、javascript apiを介してGoogleマップに配置したいと考えています。

問題は、地図をズームアウトするときにマーカーの位置がずれることです。

これは私のSVGパスです：

M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4私はすでに私はマーカーのためのアンカーを設定する必要がありますが、私は、このSVGパスのアンカーポイントを見つけるためにどのようには考えている調査した内容から、10,4S20,8.4,20,13.8z

new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(33.788303, -118.001511), 
    icon: { 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
     fillColor: '#1193c5', 
     fillOpacity: 1, 
     strokeWeight: 1, 
     strokeColor: 'black' 
    } 
    }); 

。ここで

は実施例である：https://jsbin.com/gonehocafu/edit?html,js,output

Answer 1

アイコンの大きさを知っていれば、それは計算可能です。アイコンのパスの原点は左上隅です。下の中央に移動するには、xをアイコンの幅の1/2に、yをアイコンの高さに設定します。 SVG symbolの場合：

アンカー |タイプ：Point
マーカーまたはポリラインを基準とするシンボルの位置。シンボルのパスの座標は、それぞれアンカーのx座標とy座標で左と上に変換されます。デフォルトでは、記号は（0、0）に固定されています。位置は、シンボルのパスと同じ座標系で表されます。

通常は試行錯誤します。あなたのアイコンがどのような作品のように見えるためのものです：

anchor: new google.maps.Point(10, 27) 

proof of concept fiddle

コードスニペット：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(33.788303, -118.001511), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(33.788303, -118.001511), 
 
    icon: { 
 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
 
     fillColor: '#1193c5', 
 
     fillOpacity: 1, 
 
     strokeWeight: 1, 
 
     strokeColor: 'black', 
 
     anchor: new google.maps.Point(10, 27) 
 
    }, 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>