Google Maps custom overlay position moving

Question

I've made some custom overlays for a google maps project I'm doing. The problem I'm having is when I position the overlay, it positions it based on the top left corner of the overlay so when I zoom in and out it appears as though the overlay is gradually moving right and down. I need it to position from the center so I tried:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
  div.style.left = point.x - $(this.content).outerWidth(true)/2 + 'px';
  div.style.top = point.y - $(this.content).outerHeight(true)/2 + 'px';
}

where div is the overlay, point.x and point.y make the top left corner of the overlay. I thought if I subtracted the width/2 and height/2 of the overlay it would center it. This seems to work perfectly with width for x but for y the position still gradually appears to move down as I zoom out on the map.

Answer 1

I was actually able to figure this out a while back. Turns out while the x position needs to be divided by 2, the y position does not. I just started off with the incorrect assumption that since point.x was being positioned based off the left of the div, that point.y was being positioned based off the top of the div. It looks like point.y was the middle of the div to begin with so dividing it by two was actually what was causing it to drift up and down as I zoomed.