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

Do note that when you place an image as a marker, the bottom center of the image goes to the latlng selected. you need to adjust for your image size via the Icon.anchor property (assuming you're talking about google maps Javascript v3 since you're using icon )

https://developers.google.com/maps/documentation/javascript/reference#Icon