Crosshair on map

Hi,

I would like my users to set a precise location using a Map.

They move and zoom to streetlevel to set this location.
It would be nice to have a crosshair centered in the map.

On windows I managed to get a little Tpanel to appear on top of the map, but this doesn't work across platforms. I know why, no need to explain.

But as the doc says, there are events that should make it possible to inject some Javascript in the map-rendering process. Would that be the way to go?

I'd love to see an example of such code, just to see a crosshair appear, fixed in the center of the map.

Anyone?

tia,
John

We'll investigate and report back as soon as possible.

1 Like

I've been fiddling with a bit of JavaScript (not one of my skills...) and came up with this little piece of code in the OnCustomizeJavaScript event:

  ACustomizeJavaScript:='try'+
  '{var cPoint = document.createElement(''div'');'+
  'cPoint.style.cssText = ''position:absolute;z-index:99999;  '+
  'top:50%; left:50%; width:10px;height:10px;opacity:1;background:blue;'+
'transform: translateX(-50%) translateY(-50%); pointer-events:none;'';'+
  'document.body.appendChild(cPoint);'+
  '} catch(err){alert(err.message)}';

Quick and dirty, not a real crosshair yet, and not sure if this is the way to go, but it seems to work... :)

WOW, that's great! Thanks for the input.

My way :

procedure SetzeCursor;
begin
Form2.TMSFNCGoogleMaps1.ExecuteJavascript('function SetzeCursor() {map.setOptions({draggableCursor: "crosshair"});}SetzeCursor();',
begin
//
end
);
end;

procedure SetzeCursorDefault;
begin
Form2.TMSFNCGoogleMaps1.ExecuteJavascript('function SetzeCursor() {map.setOptions({draggableCursor: "auto"});}SetzeCursor();',
procedure(const AValue: string)
begin
//
end
);
end;

Walter,
I haven't tried (not at my developing computer now), but I think that changes the cursor on the map.

I need a fixed crosshair in the center. People pan and zoom the map until the desired position is on the crosshair.

Cheers,
John

That is correct.
Only the map cursor is changed.