Adding Text inside SVG icon for Google Maps API

Question

I'm trying to create a custom Google Maps icon using SVG. I've gotten this far. However, all information online about SVG that I can find uses this kind of notation: <> <>.

I'm trying to do the SVG inside a JS object. Can anyone help me by telling me what this type of SVG is called so I can find somewhere to learn it?

My goal is to be able to add text inside the circle, but right now my text element does not work. Thank you!

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

score 1 · Answer 1 · edited May 23 '17 at 11:46

If you want to add a single character inside your SVG marker, that is supported natively by the Google Maps Javascript API v3 Marker (a "labelled marker".

Related question if you want multiple characters: Google maps Marker Label with multiple characters

code snippet:

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>

Klaujesi · Answer 2 · 2016-05-23T21:40:25.277

To add custom markers to google maps:

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

for SVG reference you can see here

here's a Plunker if you want play around: https://plnkr.co/edit/W5C0NVMrj5larSVNsmFy?p=preview

Ahh sorry if I wasn't clear. I appreciate your code. I have all of that already, I'm just trying to figure out what the SVG attribute is for text. I want to add a text element to my SVG so that each circle is numbered. — user3552105, May 23 '16 at 21:30
For SVG text reference you can see here: https://www.w3.org/TR/SVG/text.html. But google markers accept just paths. You can add listners to your markers — Klaujesi, May 23 '16 at 21:37

Adding Text inside SVG icon for Google Maps API

2 Answers2