I use the following function to add a crosshair to my Google Map. It works great for horizontal resizing. I can not figure out how to make it work for vertical. After resizing the map it requires the user to either zoom in or out 1 layer, upon which the crosshair snaps to center.
var crosshairsSize=17;
GMap2.prototype.addCrosshairs=function(){
var container=this.getContainer();
if(this.crosshairs){$(this.crosshairs).remove();}
var crosshairs=document.createElement("img");
crosshairs.src='../images/crosshair2.gif';
crosshairs.style.width=crosshairsSize+'px';
crosshairs.style.height=crosshairsSize+'px';
crosshairs.style.border='0';
crosshairs.style.position='relative';
crosshairs.style.top=((parseInt(container.clientHeight)-crosshairsSize)/2)+'px';
crosshairs.style.left="0px"; // The map is centered so 0 will do
crosshairs.style.zIndex='500';
container.appendChild(crosshairs);
this.crosshairs=crosshairs;
return crosshairs;};
I use map.checkResize(); and the map is correct, it's just the crosshair that is off. I've tried firing a javascript zoom in one level but it doesn't work like zooming in with the mouse. It's only zooming in/out with the mouse scroll wheel too... clicking and dragging the zoom slider doesn't work so somehow it's liking the mouse scroll wheel.
Firing addCrosshairs(); after resize makes no difference. It places the new crosshair in old spot and still requires a mouse scroll zoom.