Google Maps
Last updated
Was this helpful?
Last updated
Was this helpful?
(part of package 'googlemaps') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
A Servoy Extra Component that wraps Google Maps functionality.
This is a reference page; many components have detailed usage guides here.
URL of a KML Layer to overlay on the map. Type:
API key for accessing Google Maps services. Type:
Configuration settings for directions functionality. Type: CustomType<googlemaps-svy-G-Maps.routeSettings>
Flag indicating whether the fullscreen control is displayed. Type: Boolean Default Value: true
Specifies how gesture handling is configured for the map. Type: String Default Value: "auto"
Configuration for map events. Type: Array<String>
The map type to display. Possible values include "ROADMAP", "SATELLITE", "HYBRID", and "TERRAIN". Type: String Default Value: "ROADMAP"
Flag indicating whether the map type control is displayed. Type: Boolean Default Value: true
Configuration for marker events. Type: Array<String>
Array of marker objects displayed on the map. Type: Array<CustomType<googlemaps-svy-G-Maps.marker>> Default Value: []
GMaps height to be set in a responsive form. When responsiveHeight is set to 0, the component will use 100% height of the parent container Type: Number Default Value: 300
Flag indicating whether the street view control is displayed. Type: Boolean Default Value: true
Flag indicating whether Google Map clustering is enabled. Type: Boolean Default Value: false
Flag indicating whether Google Map directions are enabled. Type: Boolean Default Value: false
Flag indicating whether the zoom control is displayed. Type: Boolean Default Value: true
Called when a map event occurs.
Parameters:
{JSEvent} event The event object associated with the map event.
{CustomType<googlemaps-svy-G-Maps.latLng>} [latLng] The latitude/longitude coordinates associated with the event (optional).
Called when a marker event occurs.
Parameters:
{JSEvent} event The event object associated with the marker event.
{Number} markerIndex The index of the marker for which the event occurred.
{CustomType<googlemaps-svy-G-Maps.latLng>} [latLng] The latitude/longitude coordinates associated with the event (optional).
Called when a marker is geocoded.
Parameters:
{CustomType<googlemaps-svy-G-Maps.marker>} marker The marker that was geocoded.
{CustomType<googlemaps-svy-G-Maps.latLng>} latLng The latitude/longitude coordinates of the geocoded marker.
Called when the route on the map changes.
Parameters:
{CustomType<googlemaps-svy-G-Maps.routeResult>} routeDetails The route result details.
Adds the given marker
Parameters:
{CustomType<googlemaps-svy-G-Maps.marker>} marker The marker object to add.
{Number} [index] Starting point where to add the marker (useful to add waypoints in routes in a specific order)
Adds the given markers
Parameters:
{Array<CustomType<googlemaps-svy-G-Maps.marker>>} markers An array of marker objects to add.
{Number} [index] Starting point where to add the markers (useful to add waypoints in routes in a specific order)
Center google maps at the given address
Example:
Parameters:
{String} address The address to center the map on.
Returns: Boolean True if the map was successfully centered; otherwise, false.
Center google maps at LatLng
Example:
Parameters:
Returns: Boolean True if the map was successfully centered; otherwise, false.
Creates a new, empty marker with the given marker ID and position
Parameters:
Returns: CustomType<googlemaps-svy-G-Maps.marker> The created marker object.
Sets the viewport to contain the given bounds.
Parameters:
{Object} latLngBounds The bounds to fit within the viewport.
Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the
bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e.
the mapType is still null), or center and zoom have not been set then the result is null or undefined.
Returns: CustomType<googlemaps-svy-G-Maps.latLngBounds> The latitude/longitude boundaries of the current viewport.
Returns the position displayed at the center of the map
Returns: CustomType<googlemaps-svy-G-Maps.latLng> The latitude/longitude position at the center of the map.
Returns the marker with the given index
Parameters:
{Number} index The index of the marker to retrieve.
Returns: CustomType<googlemaps-svy-G-Maps.marker> The marker object at the specified index.
Returns the marker with the given markerId
Parameters:
{Object} markerId The unique identifier of the marker.
Returns: CustomType<googlemaps-svy-G-Maps.marker> The marker object with the specified ID.
Returns all markers
Returns: Array<CustomType<googlemaps-svy-G-Maps.marker>> An array containing all marker objects currently displayed on the map.
Add a new google marker to the map
Example:
@deprecated please use addMarkers(markers, index) instead
Parameters:
{Array<CustomType<googlemaps-svy-G-Maps.marker>>} markers An array of marker objects to add.
{Number} [index] Starting point where to add the markers
Refresh google maps
Example:
Returns: Boolean True if the map was successfully refreshed; otherwise, false.
Remove all google markers
Example:
Returns: Boolean True if all markers were successfully removed; otherwise, false.
Remove google marker at given index
Example:
Parameters:
{Number} index The index of the marker to remove.
Returns: Boolean True if the marker was successfully removed; otherwise, false.
Set Google Maps options. See here: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions the list of available options.
Parameters:
{Object} options The configuration options for customizing the map.
Represents a latitude/longitude coordinate. scripting type: CustomType<googlemaps-svy-G-Maps.latLng>
lat
The latitude value.
Type: double
Default Value: 0
lng
The longitude value.
Type: double
Default Value: 0
Represents the bounds of the map as a rectangle defined by southwest and northeast coordinates. scripting type: CustomType<googlemaps-svy-G-Maps.latLngBounds>
Represents a segment (leg) of a route. scripting type: CustomType<googlemaps-svy-G-Maps.leg>
distance
The distance of the leg as a formatted string.
Type: string
distance_meters
The distance of the leg in meters.
Type: int
duration
The duration of the leg as a formatted string.
Type: string
duration_seconds
The duration of the leg in seconds.
Type: int
end_address
The ending address of the leg.
Type: string
end_markerId
The markerId of the ending marker.
Type: object
start_address
The starting address of the leg.
Type: string
start_markerId
The markerId of the starting marker.
Type: object
Represents a marker on the Google Map. scripting type: CustomType<googlemaps-svy-G-Maps.marker>
addressDataprovider
Data provider for the marker's address.
addressString
The address string of the marker.
Type: string
animation
The animation applied to the marker (e.g. BOUNCE or DROP).
Type: string
Default Value: null
clickable
Flag indicating whether the marker is clickable.
Type: boolean
Default Value: true
crossOnDrag
Flag indicating whether a cross is shown while dragging.
Type: boolean
Default Value: true
cursor
Cursor style when hovering over the marker.
Type: string
draggable
Flag indicating whether the marker is draggable.
Type: boolean
Default Value: false
drawRadius
Flag indicating whether to draw a radius around the marker.
Type: boolean
Default Value: false
iconLabel
Label text for the marker's icon.
Type: string
iconMedia
Media object for the marker's icon.
iconUrl
URL for the marker's icon image.
Type: string
infoWindowString
HTML content for the marker's info window.
latitude
Latitude of the marker (deprecated; use position instead).
Type: double
longitude
Longitude of the marker (deprecated; use position instead).
Type: double
markerId
Unique identifier for the marker.
Type: object
opacity
The opacity of the marker.
Type: double
Default Value: 1
position
The position of the marker as a latLng object.
Type: latLng
radiusColor
The color of the radius drawn around the marker.
Default Value: "#AA0000"
radiusMeters
The radius in meters for drawing around the marker.
Type: int
Default Value: 2000
title
Title of the marker.
Type: string
tooltip
Tooltip text for the marker (deprecated; use title instead).
Type: string
userObject
User-defined object associated with the marker.
Type: object
visible
Flag indicating whether the marker is visible.
Type: boolean
Default Value: true
zIndex
The z-index of the marker.
Type: int
Represents the result of a route calculation. scripting type: CustomType<googlemaps-svy-G-Maps.routeResult>
legs
An array of legs representing segments of the route.
Type: leg[]
total_distance
The total distance of the route.
Type: int
total_duration
The total duration of the route.
Type: int
Represents settings for routing and directions on the map. scripting type: CustomType<googlemaps-svy-G-Maps.routeSettings>
avoidFerries
Flag indicating whether to avoid ferries in route calculations.
Type: boolean
Default Value: false
avoidHighways
Flag indicating whether to avoid highways in route calculations.
Type: boolean
Default Value: false
avoidTolls
Flag indicating whether to avoid tolls in route calculations.
Type: boolean
Default Value: false
optimize
Flag indicating whether route optimization is enabled.
Type: boolean
Default Value: true
travelMode
The travel mode for the route (e.g. driving, walking, bicycling, transit).
Type: string
Default Value: "driving"
Unique identifier for the map instance. Used to differentiate between multiple map components on a single form. Type:
CSS style classes applied to the Google Maps component. Type:
Flag indicating whether the Google Maps component is visible. Type:
Data provider for setting the initial zoom level of the map. Type:
Type:
Type:
Type:
Type: