ServoyCloudSupportSamplesOpen SourceCommunity

Google Maps

(part of package 'googlemaps') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

This is a reference page; many components have detailed usage guides here.

Properties

KmlLayerURL

Type: Dataprovider

apiKey

Type: Dataprovider

directionsSettings

Type: CustomType<googlemaps-svy-G-Maps.routeSettings>

fullscreenControl

Type: Boolean Default Value: true

gestureHandling

Type: String Default Value: "auto"

mapEvents

Type: Array<String>

mapType

Type: String Default Value: "ROADMAP"

mapTypeControl

Type: Boolean Default Value: true

markerEvents

Type: Array<String>

markers

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

Type: Boolean Default Value: true

styleClass

Type: Styleclass

useGoogleMapCluster

Type: Boolean Default Value: false

useGoogleMapDirections

Type: Boolean Default Value: false

visible

Type: Visible

zoomControl

Type: Boolean Default Value: true

zoomLevel

Type: Dataprovider

Events

onMapEvent(event,latLng)

Parameters:

onMarkerEvent(event,markerIndex,latLng)

Parameters:

onMarkerGeocoded(marker,latLng)

Parameters:

onRouteChanged(routeDetails)

Parameters:

API

addMarker(marker,index)

Adds the given marker

Parameters:

addMarkers(markers,index)

Adds the given markers

Parameters:

  • {Array<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<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

scripting type: CustomType<googlemaps-svy-G-Maps.latLng>

  • lat

  • lng

latLngBounds

scripting type: CustomType<googlemaps-svy-G-Maps.latLngBounds>

leg

scripting type: CustomType<googlemaps-svy-G-Maps.leg>

marker

scripting type: CustomType<googlemaps-svy-G-Maps.marker>

routeResult

scripting type: CustomType<googlemaps-svy-G-Maps.routeResult>

  • legs

  • total_distance

  • total_duration

routeSettings

scripting type: CustomType<googlemaps-svy-G-Maps.routeSettings>

  • avoidFerries

  • avoidHighways

  • avoidTolls

  • optimize

  • travelMode

    • Type: string

    • Default Value: "driving"

PreviousGaugeNextKanban

Last updated

Was this helpful?