Google Maps API / JavaScript: How to find out base point / lowest point of custom marker to set as anchor point

Question

I use the following function to create a (basic) custom marker for the Google maps API. Everything works except that the markers slightly change position when zooming.
I assume that this is caused by the default anchor point.

How can I find out what is the base point (lowest point) of my specific marker so that I can set this as my anchor point ?

function createMarker(fillColor) {
    return {
        path: 'M 0, 0 C -2, -20 -10, -22 -10, -30 A 10, 10 0 1, 1 10, -30 C 10, -22 2, -20 0, 0 z',
        fillColor: fillColor,
        fillOpacity: 1,
        labelOrigin: { x: 0, y: -29 },
        scale: 1.2,
        strokeColor: '#fff',
        strokeWeight: 1
    };
}   

Answer 1

For an SVG icon, by default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path."

anchor
Type: Point optional
The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.

For your path: 'M 0, 0 C -2, -20 -10, -22 -10, -30 A 10, 10 0 1, 1 10, -30 C 10, -22 2, -20 0, 0 z' , that looks correct to me.

To change it, set the anchor property as described above.

anchor: new google.maps.Point(0,-30)

will put the center of the "bubble" over the coordinates.

fiddle

with the default of (0,0) :

fiddle