Google maps markerとしてSVG（画像pngタグが入っている）

Question

SVGブロック内で.png画像をGoogleマップマーカーとして使用できますか？ 1つの画像をSVGフィルタで色分けして描画し、Googleマーカとして使用したい。私は、少なくとも今のところはフィルターなしで画像を使用しようとしています

：

var svg = '<?xml version="1.0"?>' + 
      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' + 
      '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/>' + 
      '</svg>'; 

var icon = { 
    url: 'data:image/svg+xml;charset=UTF-8,' + svg, 
    scaledSize: iconSize // scaled size 
}; 

そして、私は、SVGコードを取ると、ちょうどブラウザ経由でそれを使用しようとするならば、それはレンダリングOK

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200"> 
<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="{link.to.png.image}"/> 
</svg> 

しかし、 Googleマップで使用しようとしている間に何も表示されません

Answer 1

GoogleマップのSVGマーカーで、PNGを直接URLを使用して埋め込むことに成功しませんでした。私はhttpとhttpsの両方を試しました。

しかし、それはあなたがデータ-URIなどのバイナリファイルエンコードした場合に動作します。これらの回答PPLで

var svg = '<?xml version="1.0"?>' + 
      '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="200px" viewBox="0 0 200 200">' + 
      '<image width="200" height="200" preserveAspectRatio="xMinYMin slice" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>' + 
      '</svg>'; 

Answer 2

あなたに役立つ古い質問が見つかりました。

Here

var markercolor = "#fff"; 
var icon = { 
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
    fillColor: markercolor, 
    fillOpacity: .6, 
    anchor: new google.maps.Point(0,0), 
    strokeWeight: 0, 
    scale: 1 
} 

var marker = new google.maps.Marker({ 
    position: event.latLng, 
    map: map, 
    draggable: false, 
    icon: icon 
}); 

私は最善の方法は、online converterまたは類似した何かを.SVGであなたの.pngを変換することだと思います。 .pngが必要な理由はありますか？