javascript - Google Maps API, add custom SVG marker with label

Question

I'm trying to add a label to my SVG marker, and I'm having a problem with the position of the text with respect to the marker or vice-versa.

This is my icon:

  var clickIcon = {
      path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4   s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
      fillColor: myRandomColor,
      fillOpacity: 1,
      strokeColor: myRandomColor,
      strokeWeight: 1
  };

And this where I add the marker:

  clickMarker = new google.maps.Marker({
  position: location,
  map: map,
  animation: google.maps.Animation.DROP,
  draggable: isDraggable,
  icon: clickIcon,
  label: {
      text: labels[labelIndex++ % labels.length],
      color: 'black',
      fontSize: '15px',
      fontWeight: 'bold'
  }
  });

Please notice that I only added the relevant code, if more is needed let me know. As you can see, I can't align the label and the marker. Ideally, I would like to have it inside the pin circle, but below the pin would work as well. Thanks in advance.

Answer 1

Use the labelOrigin property of the Symbol

labelOrigin

Type: Point

The origin of the label relative to the origin of the path, if label is supplied by the marker. By default, the origin is located at (0, 0). The origin is expressed in the same coordinate system as the symbol's path. This property is unused for symbols on polylines.

code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var clickIcon = {
    path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4   s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
    fillColor: "#ff0000",
    fillOpacity: 1,
    strokeColor: "#ff0000",
    strokeWeight: 1,
    labelOrigin: new google.maps.Point(8, 10),
    anchor: new google.maps.Point(9, 35),
  };
  var clickMarker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    // animation: google.maps.Animation.DROP,
    draggable: true,
    icon: clickIcon,
    label: {
      text: "A",
      color: 'black',
      fontSize: '15px',
      fontWeight: 'bold'
    }
  });
}
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>