Keep Google Maps marker in centre of map while dra

Question

I'd like to display some crosshairs in the very centre of a Google Map.

Currently I have code like this:

        var mapCentre = map.getCenter();
        reticleMarker = new google.maps.Marker({
            position: mapCentre,
            map: map,
            icon: reticleImage, 
            shape: reticleShape,
            optimized: false,
            zIndex: 5
        });
        google.maps.event.addListener(map, 'bounds_changed',
           function(){reticleMarker.setPosition(map.getCenter());});  

Works great on a desktop, but not on mobile. On mobile the crosshairs don't stay in the centre of the map while the user's finger is dragging the map.

Using a drag event listener doesn't work any better.

Could anyone suggest how to deal with this in mobile browsers? (For reference, I'm seeing this problem in an Android browser.)

I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?

Answer 1

I'm thinking perhaps I should display the crosshairs in CSS, rather than as a map marker?

I've used a similar approach to great effect. You can put any HTML you want in the maps container, Google Maps wont mind.