How to update pixelPosition of a custom infoWindows on Google Maps V3 after dragging?

Question

I'm creating a new mashup on top of Google Maps. It's simple enough that I chose to use V3 to provide longer life span.

However, there's some special needs that Google Maps infoWindow doesn't provide.

I've positioned my custom infoWindow with marker.projectionContainer.pixelPosition. I get correct position after zooming, but dragging doesn't update markers pixelPosition. How can I get difference between markers old position and new after drag?

or

Should I use OverlayView instead of trying to hack position from DOM? I think Maps' own infoWindows are automatically updated/parked on panels.

Answer 1

This answer assumes that by drag you mean dragging the marker and not dragging the map, let me know if that is not the case

You should use the OverlayView and then you can use MVC techniques to bind to the marker's position property.

function MyOverlay(marker) {
  this.bindTo('position', marker);
}
MyOverlay.prototype = new google.maps.OverlayView();

MyOverlay.prototype.position_changed = function() {
  this.draw();
};

MyOverLay.prototype.draw = function() {
  // This is where you recalculate the latLngToPixel stuff where latLng
  // is this.get('position');
};

You also need to implement the rest of the OverlayView interface: onAdd and onRemove.