Show Crosshairs in Google Maps
Last Updated 29th November 2007
This map is used to demonstrate how a crosshairs can be displayed on a map. These crosshairs will 'float' as the map is panned and zoomed. They will allow the user to determine where the centre of the map is before they place a marker of save the map's position.
The Javascript
var crosshairsSize=19;
GMap2.prototype.addCrosshairs=function()
{
var container=this.getContainer();
if(this.crosshairs)
this.removeCrosshairs();
var crosshairs=document.createElement("img");
crosshairs.src='http://www.daftlogic.com/images/crosshairs.gif';
crosshairs.style.width=crosshairsSize+'px';
crosshairs.style.height=crosshairsSize+'px';
crosshairs.style.border='0';
crosshairs.style.position='relative';
crosshairs.style.top=((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;
};
var Icon=new GIcon(G_DEFAULT_ICON);
Icon.image="http://www.daftlogic.com/images/GMmarkers/stripes.png";
Icon.shadow="http://www.daftlogic.com/images/GMmarkers/shadow.png";
Icon.iconSize=new GSize(20,34);
Icon.shadowSize=new GSize(37,34);
Icon.iconAnchor=new GPoint(9,34);
Icon.infoWindowAnchor=new GPoint(9,2);
Icon.infoShadowAnchor=new GPoint(18,25);
var map = new GMap(document.getElementById("map"));
map.setMapType(G_MAP_TYPE);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-5.895538330078125, 54.62279178711505), 12);
map.addCrosshairs();
//]]>
Previous Comments For This Page
No comments yet, be the first !
Add your own comment below and let others know what you think: