# Google Maps

(part of package '[googlemaps](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/googlemaps)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

A Servoy Extra Component that wraps Google Maps functionality.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### KmlLayerURL

URL of a KML Layer to overlay on the map. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### apiKey

API key for accessing Google Maps services. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### directionsSettings

Configuration settings for directions functionality. Type: [CustomType\<googlemaps-svy-G-Maps.routeSettings>](#routesettings)

***

### fullscreenControl

Flag indicating whether the fullscreen control is displayed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### gestureHandling

Specifies how gesture handling is configured for the map. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "auto"

***

### mapEvents

Configuration for map events. Type: [Array\<String>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### mapID

A map ID is a unique identifier that represents Google Map styling and configuration settings that are stored in Google Cloud Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### mapType

The map type to display. Possible values include "ROADMAP", "SATELLITE", "HYBRID", and "TERRAIN". Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "ROADMAP"

***

### mapTypeControl

Flag indicating whether the map type control is displayed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### markerEvents

Configuration for marker events. Type: [Array\<String>](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

***

### markers

Array of marker objects displayed on the map. Type: [Array\<CustomType\<googlemaps-svy-G-Maps.marker>>](#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 300

***

### streetViewControl

Flag indicating whether the street view control is displayed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### styleClass

CSS style classes applied to the Google Maps component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### useGoogleMapCluster

Flag indicating whether Google Map clustering is enabled. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### useGoogleMapDirections

Flag indicating whether Google Map directions are enabled. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### visible

Flag indicating whether the Google Maps component is visible. Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

### zoomControl

Flag indicating whether the zoom control is displayed. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: true

***

### zoomLevel

Data provider for setting the initial zoom level of the map. Type: [Dataprovider](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

## Events

### onMapEvent(event,latLng)

Called when a map event occurs.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the map event.
> * {[CustomType\<googlemaps-svy-G-Maps.latLng>](#latlng)} \[latLng] The latitude/longitude coordinates associated with the event (optional).

***

### onMarkerEvent(event,markerIndex,latLng)

Called when a marker event occurs.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the marker event.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} markerIndex The index of the marker for which the event occurred.
> * {[CustomType\<googlemaps-svy-G-Maps.latLng>](#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)} marker The marker that was geocoded.
> * {[CustomType\<googlemaps-svy-G-Maps.latLng>](#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>](#routeresult)} routeDetails The route result details.

***

## API

### addMarker(marker,index)

Adds the given marker

**Parameters:**

> * {[CustomType\<googlemaps-svy-G-Maps.marker>](#marker)} marker The marker object to add.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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>>](#marker)} markers An array of marker objects to add.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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:**

```js
myElement.centerAtAddress(address);
```

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} address The address to center the map on.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the map was successfully centered; otherwise, false.

***

### centerAtLatLng(lat,lng)

Center google maps at LatLng

**Example:**

```js
myElement.centerAtLatLng(lat, lng);
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} lat The latitude coordinate.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} lng The longitude coordinate.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} markerId The unique identifier for the marker.
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} addressOrLatLng The address string or latitude/longitude coordinates for the marker position.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} \[title] Optional title for the marker.

**Returns:** [CustomType\<googlemaps-svy-G-Maps.marker>](#marker) The created marker object.

***

### fitBounds(latLngBounds)

Sets the viewport to contain the given bounds.

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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>](#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>](#latlng) The latitude/longitude position at the center of the map.

***

### getMarker(index)

Returns the marker with the given index

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The index of the marker to retrieve.

**Returns:** [CustomType\<googlemaps-svy-G-Maps.marker>](#marker) The marker object at the specified index.

***

### getMarkerById(markerId)

Returns the marker with the given markerId

**Parameters:**

> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} markerId The unique identifier of the marker.

**Returns:** [CustomType\<googlemaps-svy-G-Maps.marker>](#marker) The marker object with the specified ID.

***

### getMarkers()

Returns all markers

**Returns:** [Array\<CustomType\<googlemaps-svy-G-Maps.marker>>](#marker) An array containing all marker objects currently displayed on the map.

***

### newMarkers(markers,index)

Add a new google marker to the map

**Example:**

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

**@deprecated** please use `addMarkers(markers, index)` instead

**Parameters:**

> * {[Array\<CustomType\<googlemaps-svy-G-Maps.marker>>](#marker)} markers An array of marker objects to add.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} \[index] Starting point where to add the markers

***

### refresh()

Refresh google maps

**Example:**

```js
myElement.refresh();
```

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the map was successfully refreshed; otherwise, false.

***

### removeAllMarkers()

Remove all google markers

**Example:**

```js
myElement.removeAllMarkers();
```

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if all markers were successfully removed; otherwise, false.

***

### removeMarker(index)

Remove google marker at given index

**Example:**

```js
myElement.removeMarker(index);
```

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The index of the marker to remove.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
  * **Default Value**: 0
* lng
  * The longitude value.
  * **Type**: [double](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
  * **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](#latlng)
* sw
  * The southwest coordinate.
  * **Type**: [latLng](#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* distance\_meters
  * The distance of the leg in meters.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* duration
  * The duration of the leg as a formatted string.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* duration\_seconds
  * The duration of the leg in seconds.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* end\_address
  * The ending address of the leg.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* end\_markerId
  * The markerId of the ending marker.
  * **Type**: [object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)
* start\_address
  * The starting address of the leg.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* start\_markerId
  * The markerId of the starting marker.
  * **Type**: [object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/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](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)
* addressString
  * The address string of the marker.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* animation
  * The animation applied to the marker (e.g. BOUNCE or DROP).
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
  * **Default Value**: null
* clickable
  * Flag indicating whether the marker is clickable.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: true
* crossOnDrag
  * Flag indicating whether a cross is shown while dragging.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: true
* cursor
  * Cursor style when hovering over the marker.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* draggable
  * Flag indicating whether the marker is draggable.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* drawRadius
  * Flag indicating whether to draw a radius around the marker.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* iconLabel
  * Label text for the marker's icon.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* iconMedia
  * Media object for the marker's icon.
  * **Type**: [media](https://docs.servoy.com/servoy-developer/component_and_service_property_types#media)
* iconUrl
  * URL for the marker's icon image.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* infoWindowString
  * HTML content for the marker's info window.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)
* latitude
  * Latitude of the marker (deprecated; use position instead).
  * **Type**: [double](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* longitude
  * Longitude of the marker (deprecated; use position instead).
  * **Type**: [double](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* markerId
  * Unique identifier for the marker.
  * **Type**: [object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)
* opacity
  * The opacity of the marker.
  * **Type**: [double](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
  * **Default Value**: 1
* position
  * The position of the marker as a latLng object.
  * **Type**: [latLng](#latlng)
* radiusColor
  * The color of the radius drawn around the marker.
  * **Type**: [color](https://docs.servoy.com/servoy-developer/component_and_service_property_types#color)
  * **Default Value**: "#AA0000"
* radiusMeters
  * The radius in meters for drawing around the marker.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
  * **Default Value**: 2000
* title
  * Title of the marker.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* tooltip
  * Tooltip text for the marker (deprecated; use title instead).
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* userObject
  * User-defined object associated with the marker.
  * **Type**: [object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)
* visible
  * Flag indicating whether the marker is visible.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: true
* zIndex
  * The z-index of the marker.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

## 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\[\]](#leg)
* total\_distance
  * The total distance of the route.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* total\_duration
  * The total duration of the route.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)

## 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* avoidHighways
  * Flag indicating whether to avoid highways in route calculations.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* avoidTolls
  * Flag indicating whether to avoid tolls in route calculations.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* optimize
  * Flag indicating whether route optimization is enabled.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: true
* travelMode
  * The travel mode for the route (e.g. driving, walking, bicycling, transit).
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
  * **Default Value**: "driving"

***