title: Google Maps API, add custom SVG marker with label
body: <p>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. </p>
  
  <p>This is my icon:</p>
  
  <pre><code>  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
    };
  </code></pre>
  
  <p>And this where I add the marker:</p>
  
  <pre><code>  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'
    }
    });
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/RnkiD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RnkiD.png" alt="enter image description here"></a></p>