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"

---