API Карт Google, добавьте настраиваемый маркер SVG с меткой

Я пытаюсь добавить метку в свой SVG-маркер, и у меня проблема с положением текста относительно маркера или наоборот.

Это мой значок:

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

И это, где я добавляю маркер:

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

Обратите внимание, что я добавил только соответствующий код, если требуется больше, сообщите мне. Как вы можете видеть, я не могу выровнять метку и маркер. В идеале, я хотел бы иметь его внутри пин-круга, но под штифтом тоже будет работать. Спасибо заранее.

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

Используйте свойство labelOrigin Symbol

labelOrigin

Тип: Точка

Происхождение метки относительно начала пути, если метка указана маркером. По умолчанию начало координат расположено в (0, 0). Происхождение выражается в той же системе координат, что и путь символа. Это свойство не используется для символов в полилиниях.

фрагмент кода:

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"></script>
<div id="map_canvas"></div>