[解決済み] Google Maps API v3 で SVG マーカーを使用する方法

質問

変換したimage.svgをgoogle mapのアイコンとして使用することはできますか？png画像をsvgに変換したのですが、これを回転可能なgoogle mapのシンボルのように使いたいのです。すでにgoogle mapのシンボルを使おうとしましたが、車や人などのアイコンが欲しいのですが...。そのため、いくつかのpngファイルをsvgに変換したのですが、ちょうどこの例のサイトのように、これらのために何を使っているのでしょうか？ http://www.goprotravelling.com/

どのように解決するのですか？

アイコンをレンダリングするには SVGパス表記 .

参照 Googleドキュメント を参照してください。

基本的な例を紹介します。

var icon = {

    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#FF0000',
    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
});

マーカーSVGアイコンの表示と拡大縮小の動作例です。

JSFiddleのデモ

編集してください。

ここにも複雑なアイコンの例があります。

JSFiddleのデモ

2を編集します。

そして、SVGファイルをアイコンとして持たせる方法を紹介します。

JSFiddleのデモ