Google Maps

(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.

Properties

KmlLayerURL

URL of a KML Layer to overlay on the map. Type: Dataprovider

apiKey

API key for accessing Google Maps services. Type: Dataprovider

directionsSettings

Configuration settings for directions functionality. Type: CustomType<googlemaps-svy-G-Maps.routeSettings>

fullscreenControl

Flag indicating whether the fullscreen control is displayed. Type: Boolean Default Value: true

gestureHandling

Specifies how gesture handling is configured for the map. Type: String Default Value: "auto"

mapEvents

Configuration for map events. Type: Array<String>

mapID

Unique identifier for the map instance. Used to differentiate between multiple map components on a single form. Type: Dataprovider

mapType

The map type to display. Possible values include "ROADMAP", "SATELLITE", "HYBRID", and "TERRAIN". Type: String Default Value: "ROADMAP"

mapTypeControl

Flag indicating whether the map type control is displayed. Type: Boolean Default Value: true

markerEvents

Configuration for marker events. Type: Array<String>

markers

Array of marker objects displayed on the map. Type: Array<CustomType<googlemaps-svy-G-Maps.marker>> Default Value: []

responsiveHeight

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

streetViewControl

Flag indicating whether the street view control is displayed. Type: Boolean Default Value: true

styleClass

CSS style classes applied to the Google Maps component. Type: Styleclass

useGoogleMapCluster

Flag indicating whether Google Map clustering is enabled. Type: Boolean Default Value: false

useGoogleMapDirections

Flag indicating whether Google Map directions are enabled. Type: Boolean Default Value: false

visible

Flag indicating whether the Google Maps component is visible. Type: Visible

zoomControl

Flag indicating whether the zoom control is displayed. Type: Boolean Default Value: true

zoomLevel

Data provider for setting the initial zoom level of the map. Type: Dataprovider

Events

onMapEvent(event,latLng)

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).

onMarkerEvent(event,markerIndex,latLng)

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).

onMarkerGeocoded(marker,latLng)

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.

onRouteChanged(routeDetails)

Called when the route on the map changes.

Parameters:

{CustomType<googlemaps-svy-G-Maps.routeResult>} routeDetails The route result details.

API

addMarker(marker,index)

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)

addMarkers(markers,index)

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)

centerAtAddress(address)

Center google maps at the given address

Example:

myElement.centerAtAddress(address);

Parameters:

{String} address The address to center the map on.

Returns: Boolean True if the map was successfully centered; otherwise, false.

centerAtLatLng(lat,lng)

Center google maps at LatLng

Example:

myElement.centerAtLatLng(lat, lng);

Parameters:

{Number} lat The latitude coordinate.
{Number} lng The longitude coordinate.

Returns: Boolean True if the map was successfully centered; otherwise, false.

createMarker(markerId,addressOrLatLng,title)

Creates a new, empty marker with the given marker ID and position

Parameters:

{Object} markerId The unique identifier for the marker.
{Object} addressOrLatLng The address string or latitude/longitude coordinates for the marker position.
{String} [title] Optional title for the marker.

Returns: CustomType<googlemaps-svy-G-Maps.marker> The created marker object.

fitBounds(latLngBounds)

Sets the viewport to contain the given bounds.

Parameters:

{Object} latLngBounds The bounds to fit within the viewport.

getBounds()

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.

getCenter()

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.

getMarker(index)

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.

getMarkerById(markerId)

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.

getMarkers()

Returns all markers

Returns: Array<CustomType<googlemaps-svy-G-Maps.marker>> An array containing all marker objects currently displayed on the map.

newMarkers(markers,index)

Add a new google marker to the map

Example:

myElement.newMarkers([{addressString: 'Fred. Roeskestraat 97, Amsterdam, NL'}]);

@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()

Refresh google maps

Example:

myElement.refresh();

Returns: Boolean True if the map was successfully refreshed; otherwise, false.

removeAllMarkers()

Remove all google markers

Example:

myElement.removeAllMarkers();

Returns: Boolean True if all markers were successfully removed; otherwise, false.

removeMarker(index)

Remove google marker at given index

Example:

myElement.removeMarker(index);

Parameters:

{Number} index The index of the marker to remove.

Returns: Boolean True if the marker was successfully removed; otherwise, false.

setOptions(options)

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.

Types

latLng

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

latLngBounds

Represents the bounds of the map as a rectangle defined by southwest and northeast coordinates. scripting type: CustomType<googlemaps-svy-G-Maps.latLngBounds>

ne
- The northeast coordinate.
- Type: latLng
sw
- The southwest coordinate.
- Type: latLng

leg

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

marker

Represents a marker on the Google Map. scripting type: CustomType<googlemaps-svy-G-Maps.marker>

addressDataprovider
- Data provider for the marker's address.
- Type: dataprovider
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.
- Type: media
iconUrl
- URL for the marker's icon image.
- Type: string
infoWindowString
- HTML content for the marker's info window.
- Type: tagstring
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.
- Type: color
- 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

routeResult

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

routeSettings

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"

PreviousGauge NextKanban

Last updated 2 months ago

Was this helpful?