Logic, but in a different way

Daft Logic

Show Cross hairs in Google Maps

Last Updated 10th November 2010

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.


10/11/2010 : Updated for Google Maps API V3

13/07/2011 : Updated make to prevent mouse cursor changing when hovering over crosshairs. Thanks to BentFX

The Javascript


var crosshairShape = {coords:[0,0,0,0],type:'rect'};
var latlng = new google.maps.LatLng(54.62279178711505,-5.895538330078125);
var myOptions = {zoom:12,center:latlng,mapTypeId:google.maps.MapTypeId.SATELLITE,draggableCursor:'crosshair',mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
map: map,
icon: 'http://www.daftlogic.com/images/cross-hairs.gif',
shape: crosshairShape
marker.bindTo('position', map, 'center');

Previous Comments For This Page

nice 1. I have found another example to change mouse pointer to arrow using http://www.etechpulse.com/2013/07/how-to-change-draggable-hand-cursor.html for more visit http://www.etechpulse.com/2013/07/how-to-change-draggable-hand-cursor.html
By Rk on 05/01/2014
Is there a way to make a circle that is, say 10 miles dia, and for it to always stay that dia ? changing size as you zoom in or out to keep it at the same miles diameter ? it would fill the map when zoomed way in and be a tiny circle when zoomed way out? it would be great to combine this fixed size cross hair with the changing circle.
By Dave in NJ on 05/10/2012
Do you know of a way to optimize this so it doesn't jump when you make a quick change?
By Aero on 24/03/2012
Hi Daft Logic, Just stopped by to touch base. Good to see it's working. There is some issue with it jumping a bit in some browsers. I'm on Linux and in both Ubuntu 10.04 and Linux From Scratch it jumps in Firefox and is rock solid in Chrome. (just the opposite of what other OS users report) This would lead me to believe it is a issue with the JavaScript implementations, and not going to be fixed by shuffling variables around. :) Keep up the good stuff.
By BentFX on 14/12/2011
It's cool, but the crosshair always blinking when I drag the map. I think that's happend because the doing calculating the center. The second solution at stackoverflow.com do the same thing... Browser Chrome
By funkys0ldier on 25/11/2011
Thanks for the trick, but just a caveat: the crosshair is not completely centered. The bottom edge of the crosshair is the actual center of the map, and not the center of the crosshair as it is supposed to be. To correct offset change property 'icon' from the marker options to: icon: new google.maps.MarkerImage('http://www.daftlogic.com/images/cross-hairs.gif', null, null, new google.maps.Point(10,10)),
On 23/11/2011
BentFX, thanks this has now been implemented and seems to do the trick.
By Daft Logic on 13/07/2011
As Garland Pope mentioned we've discussed this issue at http://stackoverflow.com/questions/4130237/displaying-crosshairs-in-the-center-of-a-javascript-google-map . By adding "var crosshairShape = {coords:[0,0,0,0],type:'rect'};" then adding "shape: crosshairShape" to then marker definition you can keep the cursor from changing when you hover over the cross-hairs, and it also overcomes the dead spot when panning/dragging across the cross-hairs.
By BentFX on 07/07/2011
Thanks for this!
By AnnaPS on 03/07/2011
I came back because I needed a solution for V3, so it's cool to see that you have updated your solution. Unfortunately, this version suffers from the crosshairs not being permanently fixed in the center of the map. When you drag quickly or zoom in and out, the crosshairs move a little before being recentered. It's not a show-stopper, but the v2 solution was nicer in this regard. FYI, I mentioned your solution at http://stackoverflow.com/questions/4130237/displaying-crosshairs-in-the-center-of-a-javascript-google-map.
By Garland Pope on 24/05/2011
I've never seen cross hairs on a map with a circle around them- like a gun sight.
By DEF3 on 10/01/2011
Works GREAT! Thank YOU!
On 06/06/2010
Thanks! The only change I had to make was to calculate the top and left differently. The clientHeight and clientWidth properties of the container were still set to 0 because my map is hidden when the page first loads. I used parseInt(container.style.height) instead.
By Garland Pope on 02/03/2010
Still no map or crosshairs 08/18/09
By Dr. Sax on 18/08/2009
No map and no crosshairs in ff-3.0.10, just one error message: "G_MAP_TYPE is not defined". Funny.
By Nefi on 20/05/2009

Add your own comment below and let others know what you think:

Comments :

Your Name (optional) :