Skip to content

TWebGoogleMaps

Description

Below is a list of the most important properties, methods and events for TWebGoogleMaps.

Designtime Runtime

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <DIV ID=”UniqueID”></DIV>
ElementID UniqueID

Properties for TWebGoogleMaps

Property Description
APIkey Sets the Google Maps JavaScript API key
Center Sets whether the map control centers vertically and/or horizontally within its parent control
ElementClassName Optionally sets the CSS classname for the map when styling via CSS is used
ElementID Optionally sets the HTML element ID for a HTML element in the form HTML file the label needs to be connected with. When connected, no new map is created but the Delphi class is connected with the existing HTML element in the form HTML file
MapID: string Sets the ID of the map to the Google Map ID when a map style was generated in the Google Developer Console. The MapID is also needed when choosing the vector map type
MapElement: TJSHTMLElement Returns the Google maps main map element
MapRender Selects the rendering type of the map. This can be mrRaster (default) and mrVector. Note that the mrVector rendering type needs to be selected for allowing to change the map heading and tilt. Also, vector rendering needs to be enabled for a created mapID in the Google Developer Console. It is not enabled by default.
Options Sets various options for the map
Markers[AIndex: Integer] : TJSObject Array of Markers currently displayed on the map
Polygons[AIndex: Integer] : TJSObject Array of Polygons currently displayed on the map
Polylines[AIndex: Integer] : TJSObject Array of Polylines currently displayed on the map
Circles[AIndex: Integer] : TJSObject Array of Circles currently displayed on the map
Rectangles[AIndex: Integer] : TJSObject Array of Rectangles currently displayed on the map

Methods for TWebGoogleMaps

Property Description
SetCenter(Lat, Lon: Double); Centers the map around geocoordinate Lat/Lon
SetZoom(Zoom: Integer); Controls the map zoom level (between 1 and 21 for US & Europe, other areas the maximum zoom level might be lower)
AddMarker(Lat, Lon: Double; Title: string =''); Adds a marker with optional title at geocoordiate Lat/Lon
AddMarker(Lat, Lon: Double; PinIcon: string;Title: string = ''); Adds a marker with image URL PinIcon and with optional title at geocoordiate Lat/Lon
AddMarker(Lat, Lon: Double; Color: TColor: PinLetter: string;Title: string = ''); Adds a marker with specified color and letter in the pin and with optional title at geocoordinate Lat/Lon
AddMarker(Lat, Lon: Double; Color: TGoogleMarkerColor;Title: string = ''); Adds a default Google marker with specified color and with optional title at geocoordinate Lat/Lon The default Google colors can be: mcDefault, mcRed, mcBlue, mcGreen, mcPurple, mcYellow
AddMarker(Lat, Lon: Double; Shape: TGoogleMarkerShape; Color: TColor; BorderColor: TColor; Scale: Double; CustomShape = string = ‘’;Title: string = ''); Adds a marker with specified shape, color, bordercolor, scale and with optional title at geocoordinate Lat/Lon The shape can be: msPin, msPinDot, msFlag, msBookmark, msFlagSmall, msHome, msFavorite, msStar, msCustom If msCustom is selected a CustomShape value can be provided.
AddMarker(Lat,Lon: Double; PinIcon: string; Title: string; XOffset: integer = 0; YOffset: integer = 0); Adds a marker with specified image URL and hint at geocoordinate Lat/Lon. Optionally, and X,Y offset of the image versus the Lat/Lon position can be specified
AddPolyline(Points: TJSArray; AColor: TColor = clRed; AWidth: Integer = 2; AOpacity: Double = 1) Adds a polyline with the specified coordinate Points and with optional color, width and opacity
AddPolygon(Points: TJSArray; AFillColor: TColor = clRed; AStrokeColor: TColor = clBlack; AWidth: Integer = 2; AOpacity: Double = 1) Adds a polygon with specified coordinate Points and with optional fill color, stroke color, width and opacity
AddCircle(Lat, Lon: Double; Radius: Integer; AFillColor: TColor = clRed; AStrokeColor: TColor = clBlack; AWidth: Integer = 2; AOpacity: double = 1) Adds a circle with specified center coordinates, radius and optional fill color, stroke color, width and opacity
AddRectangle(NorthEastLat, NorthEastLon, SouthWestLat, SouthWestLon: Double; AFillColor: TColor = clRed; AStrokeColor: TColor = clBlack; AWidth: Integer = 2; AOpacity: Double = 1) Adds a rectangle with specified coordinates, radius and optional fill color, stroke color, width and opacity
AddGPX(AGPX: string; AColor; TColor; AWidth: Integer; AOpacity: Double); Adds a GPX layer with optional Color, Width and Opacity to the map
AddKML(Url: string; ZoomToBounds: Boolean = true) Adds a KML layer with specified Url to the map and optionally zoom to the KML layer bounds
ClearMarkers Removes all markers from the map
ClearPolylines Removes all polylines from the map
ClearPolygons Removes all polygons from the map
ClearCircles Removes all circle from the map
ClearRectangles Removes all rectangles from the map
ClearKMLs Removes all KMLs from the map
MoveMarker(AIndex: integer; NewLat, NewLon: double) Moves the marker with index AIndex to the new coordinates NewLat/NewLon.
ShowDirections(Source, Destination: string; ATravelMode: TGoogleTravelMode = tmDriving; WayPoints: TStringList = nil; OptimizeWayPoints: Boolean = False; AvoidHighways: Boolean = False; AvoidTolls: Boolean = False); Show the calculated route between Source and Destination expressed as addresses. Optionally set TravelMode, add WayPoints, OptimizeWayPoints, AvoidHighways, AvoidTolls
ShowDirections(SourceLon, SourceLat, DestLon, DestLat: Double; ATravelMode: TGoogleTravelMode = tmDriving; WayPoints: TStringList = nil; OptimizeWayPoints: Boolean = False; AvoidHighways: Boolean = False; AvoidTolls: Boolean = False); Show the calculated route between Source and Destination expressed as coordinates. Optionally set TravelMode, add WayPoints, OptimizeWayPoints, AvoidHighways, AvoidTolls
RemoveDirections Removes the display of a route on the map
GeoCode(const Address: string); Converts the address to the geocoordinate Lat/Lon. The result of the conversion is retrieved via the event OnGeoCoded
PanTo(Lat, Lon: Double) Pan the center of the map to the provided coordinates
SetHeading(AHeading: Double) Sets the heading of the map. Note that this feature is only available when MapRender is set to mrVector
SetTilt(ATilt: Double) Sets the tilting of the map. Note that this feature is only available when MapRender is set to mrVector
SetZoom(Zoom: Integer) Zoom the map to the provided zoom level
Distance(Lon1,Lat1,Lon2,Lat2: double): double; Calculates the straight-line distances in kilometers between two coordinates
FitBounds(LatMin, LonMin, LatMax, LonMax: Double) Pan and zoom the map to the bounds of the provided coordinates
GetCenter(var Lat, Lon: Double): Boolean Returns the current center coordinate of the map
GetCoord(Lon,Lat: Double): JSValue Returns a Google maps coordinate object from a given longitude and latitude
GetBBox(Lon1,Lat1,Lon2,Lat2: double): JSValue; Returns a Google bounding box object from two coordinates.
GetBounds(var NorthEastLat, NorthEastLon, SouthWestLat, SouthWestLon: Double): Boolean; Returns the current bounds of the map
SetDoubleClickZoom(AValue: Boolean) Sets if the map is zoomed when a double click occurs
SetScrollWheel(AValue: Boolean) Sets if the map is zoomed when the mouse wheel is used
SetDraggable(AValue: Boolean) Sets if the map can be dragged to a new position
SetMapType(AMapType: TGoogleMapType = mtDefault) Sets the map type to display. Options are mtDefault, mtSatellite, mtHybrid, mtTerrain
SetMarkerTitle(AIndex: Integer; ATitle: string) Sets the title of the marker with index AIndex
SetMarkerLocation(AIndex: Integer; Lat, Lon: Double); Sets the location of the marker with index AIndex
SetMarkerIcon(AIndex: Integer; Url: string); Sets the icon of the marker with index AIndex
SetCircleCenter(AIndex: Integer; Lat, Lon: Double); Sets the icon of the marker with index AIndex
SetCircleCenter(AIndex: Integer; Lat, Lon: Double); Sets the center of the circle with index AIndex
SetCircleRadius(AIndex, Radius: Integer); Sets the radius of the circle with index AIndex
SetCircleColors(AIndex: Integer; AFillColor, AStrokeColor: TColor); Sets the colors of the circle with index AIndex
SetRectangleLocation(AIndex: Integer; NorthEastLat, NorthEastLon, SouthWestLat, SouthWestLon: Double); Sets the location of the rectangle with index AIndex
SetRectangleColors(AIndex: Integer; AFillColor, AStrokeColor: TColor); Sets the colors of the rectangle with index AIndex
SetPolylineColor(AIndex: Integer; AColor: TColor); Sets the color of the polyline with index AIndex
SetPolylinePoints(AIndex: Integer; Points: TJSArray); Sets the points of the polyline with index AIndex
SetPolygonColors(AIndex: Integer; AFillColor, AStrokeColor: TColor); Sets the colors of the polygon with index AIndex
SetPolygonPoints(AIndex: Integer; Points: TJSArray); Sets the points of the polygon with index AIndex
ShowStreetView(Lat, Lon: Double; Heading: Integer = 0; Zoom: Integer = 0; Pitch: Integer = 0) Display streetview mode for the provided coordinates. Optionally set the heading
HideStreetView Hide streetview mode
RemoveMarker(AIndex: Integer); Remove the marker with index AIndex from the map
RemovePolygon(AIndex: Integer) Remove the polygon with index AIndex from the map
RemovePolyline(AIndex: Integer); Remove the polyline with index AIndex from the map
RemoveCircle(AIndex: Integer); Remove the circle with index AIndex from the map
RemoveRectangle(AIndex: Integer); Remove the rectangle with index AIndex from the map

Events for TWebGoogleMaps

Event Description
OnCircleClick Event triggered when a Circle is clicked
OnGeoCoded Event triggered when the geocoding started with WebGoogleMaps.GeoCode() was successful
OnKeyDown Event triggered when a key was clicked
OnKeyPress Event triggered when a key was pressed
OnKeyUp Event triggered when a key click finished
OnKMLClick Event triggered when a KML is clicked
OnMarkerClick Event triggered when a marker is clicked
OnMapClick Event triggered when the map is clicked
OnMapDblClick Event triggered when the map is doubleclicked
OnMapIdle Event triggered when map interaction has ended
OnMapLoaded Event triggered when the map has finished loading. Note that Properties/Methods that interact with the map should only be used after this event was triggered.
OnMapPan Event triggered when the map is panned
OnMapZoom Event triggered when the map is zoomed
OnPolylineClick Event triggered when a Polyline is clicked
OnPolygonClick Event triggered when a Polygon is clicked
OnRectangleClick Event triggered when a Rectangle is clicked