Show Crosshairs in Google Maps

Demonstration of floating crosshairs in Google Maps to indicate the centre of the map

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.

In this example the cursor is also set to be a crosshairs icon.

The Javascript

var crosshairShape = {coords:[0,0,0,0],type:'rect'};
var latlng = new google.maps.LatLng(54.62279178711505,-5.895538330078125);
var myOptions = {
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker = new google.maps.Marker({
	map: map,
	icon: '',
	shape: crosshairShape
marker.bindTo('position', map, 'center');

Version History

Version Date Description
Version 1.0 10/11/2010 Updated for Google Maps API V3
Version 2.0 13/07/2011 Updated make to prevent mouse cursor changing when hovering over crosshairs. Thanks to BentFX
Version 2.1 05/01/2017 Small updates to formatting of Javascript example

Comments For This Page

Hi Jonny, perhaps it would be the same as the current map centre. So map.getCenter();
By Daft Logic on 1st February 2018
Hi, Great solution. I have used the code which places the cross hair in the centre of the map rather than making it drag able. One question though how could i get the position (lat and lag) of the current position of the cross hair. Any advice would be greatly appreciated. Thanks.
By Jonny on 1st February 2018
tnx for the post
On 14th October 2014
nice 1. I have found another example to change mouse pointer to arrow using

for more visit
By Rk on 5th January 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 5th October 2012
Do you know of a way to optimize this so it doesn't jump when you make a quick change?
By Aero on 24th March 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 14th December 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 do the same thing...
Browser Chrome
By funkys0ldier on 25th November 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('', null, null, new google.maps.Point(10,10)),

On 23rd November 2011
BentFX, thanks this has now been implemented and seems to do the trick.
By Daft Logic on 13th July 2011
As Garland Pope mentioned we've discussed this issue at . 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 7th July 2011
Thanks for this!
By AnnaPS on 3rd July 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
By Garland Pope on 24th May 2011
I've never seen cross hairs on a map with a circle around them- like a gun sight.
By DEF3 on 10th January 2011
Works GREAT!
Thank YOU!
On 6th June 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( instead.
By Garland Pope on 2nd March 2010
Still no map or crosshairs 08/18/09
By Dr. Sax on 18th August 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 20th May 2009

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

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!