Circles, lines and polygons

Since version 1.6.0 the map can also show circles, polylines and polygons, and compute the distance between two points. All of them can be editable (the user changes them with the mouse), draggable or clickable, and can open an info window with some HTML.

Circles

var
  Center: TLatLng;
begin
  Center.Latitude := -31.9523;
  Center.Longitude := 115.8613;
  EdgeGoogleMapViewer.PutCircle(Center, 23,
    False, False, True, True,        // Editable, Draggable, Visible, Clickable
    '#FF0000', 0.8, 2,               // StrokeColor, StrokeOpacity, StrokeWeight
    '#FF0000', 0.35,                 // FillColor, FillOpacity
    '<h1>Perth</h1><p>Capital of Western Australia</p>');
end;

Radius is in meters. The colours are CSS colours ('#FF0000', 'red'), the opacities are between 0 and 1, the last parameter - the info window - is optional.

ClearCircles removes them all, HideCircles and ShowCircles hide and show them.

Polylines

The path is a JavaScript array of positions, written as text:

EdgeGoogleMapViewer.PutPolyline(
  '[ { lat: 40.7128, lng: -74.0060 },'  + sLineBreak +   // New York
  '  { lat: 34.0522, lng: -118.2437 },' + sLineBreak +   // Los Angeles
  '  { lat: 41.8781, lng: -87.6298 } ]',                 // Chicago
  True, False, True, True, True,    // Geodesic, Editable, Visible, Clickable, FitBounds
  '#FF0000', 1.0, 2);               // StrokeColor, StrokeOpacity, StrokeWeight

Geodesic draws the segments along the curvature of the earth, FitBounds zooms the map so that the whole line is in view. ClearPolylines, HidePolylines and ShowPolylines work as for the circles.

Polygons

Same path as a polyline - the polygon is closed by itself - and a fill:

EdgeGoogleMapViewer.PutPolygon(
  '[ { lat: 52.5142, lng: 13.4123 },' + sLineBreak +   // Berlin
  '  { lat: 50.0717, lng: 14.4379 },' + sLineBreak +   // Prague
  '  { lat: 48.1222, lng: 11.5775 } ]',                // Munich
  False, True, True, True,          // Editable, Visible, Clickable, FitBounds
  '#0000FF', 0.8, 2,                // StrokeColor, StrokeOpacity, StrokeWeight
  '#0000FF', 0.35);                 // FillColor, FillOpacity

ClearPolygons, HidePolygons and ShowPolygons complete the set.

The path is JavaScript

Path goes into the page as it is: it must be a valid array of { lat: ..., lng: ... } objects. Build it from coordinates with CoordToText, which always writes the dot as decimal separator, and do not put there text typed by a user.

Distance between two points

var
  FromPoint, ToPoint: TLatLng;
begin
  FromPoint.Latitude := 40.7128;  FromPoint.Longitude := -74.0060;
  ToPoint.Latitude := 32.0522;    ToPoint.Longitude := -118.2437;
  ShowMessageFmt('Distance %8.2f meters',
    [EdgeGoogleMapViewer.ComputeDistanceBetween(FromPoint, ToPoint)]);
end;

ComputeDistanceBetween returns the length, in meters, of the shortest path along the surface of the earth between the two points.