Google Maps APIのSVGアイコン内にテキストを追加

Question

SVGを使用してカスタムGoogleマップアイコンを作成しようとしています。私はこれまでこれを得た。しかし、私が見つけることができるSVGに関するオンラインのすべての情報は、この種類の表記を使用します：<> <>。

JSオブジェクト内でSVGを実行しようとしています。誰でもこのタイプのSVGが呼ばれているので、どこかでそれを知ることができますか？

私の目標は、円の内側にテキストを追加できるようにすることですが、今はテキスト要素が機能しません。ありがとうございました！

var icon = { 
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
    fillColor: '#FF0000', 
    fillOpacity: .6, 
    strokeWeight: 1, 
    scale: .5, 
    text: "57" 
} 

Answer 1

マップをGoogleにカスタムマーカーを追加するには：

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363882, lng: 131.044922} 
    }); 

    //define your marker 
    var goldStar = { 
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z', 
    fillColor: 'yellow', 
    fillOpacity: 0.8, 
    scale: 1, 
    strokeColor: 'gold', 
    strokeWeight: 14 
    }; 

//put the marker on the map 
    var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: goldStar, 
    map: map 
    }); 
var contentString = '<div id="content">'+ 
        'lorem ipsum </div>' 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

marker.addListener('click', function() { 
    infowindow.open(map, marker); 
}); 
} 

SVGの参照のためのあなたが遊んたい場合here

がここPlunkerだ見ることができます：https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview

Answer 2

をしたい場合SVGマーカーの中に1文字を追加するには、GoogleマップのJavascript API v3 Marker (a "labelled marker"がネイティブにサポートしています。あなたが複数の文字をしたい場合

関連質問：Google maps Marker Label with multiple characters

コードスニペット：私は明確ではなかった場合

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.405, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    icon: { 
 
     path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", 
 
     fillColor: '#FF0000', 
 
     fillOpacity: .6, 
 
     strokeWeight: 1, 
 
     scale: .5, 
 
     text: "57" 
 
    }, 
 
    label: "B" 
 
    }) 
 

 
} 
 
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>