views:

32

answers:

1

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.

A: 

I figured this out after three painful days. When redrawing the map

map.enableScrollWheelZoom();

must come after

map.addCrosshairs();
joe