Google Maps Marker off center

Question

I have a google maps with a circle at a specific Lat and Lng. I am also using a Marker that I want displayed in the center of the circle, which should be the Lat and Lng the circle is set to.

Here is a screen shot of what I am talking about:

You can see the "6" and "7" are not in the center of the circle. I am not sure how to fix this?

Here is the Marker code:

var markerIcon = [
                "img/marker-icon-1.png",
                "img/marker-icon-2.png",
                "img/marker-icon-3.png",
                "img/marker-icon-4.png",
                "img/marker-icon-5.png",
                "img/marker-icon-6.png",
                "img/marker-icon-7.png",
                "img/marker-icon-8.png",
                "img/marker-icon-9.png",
                "img/marker-icon-10.png"
            ];


var marker = new google.maps.Marker({
    position:new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
    icon: markerIcon[i],
    map: map
});

I am setting the Lat and Lng from a JSON file, but I am using the same Lat and Lng to set the center of my circles.

Answer 1

Hopefully someone will find this helpful that is looking for a more copy paste answer. ICON_BASE allows you to replicate it across multiple icons of the same size.

const ICON_BASE = {
    size: new google.maps.Size(16, 16), 
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(8, 8)),
};

const ICON_1 = {
    ...ICON_BASE,
    url: "img/marker-icon-1.png",
};