# Google Maps

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

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](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### apiKey

API key for accessing Google Maps services. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### gestureHandling

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

***

### mapEvents

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

***

### mapID

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

***

### mapType

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

***

### mapTypeControl

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

***

### markerEvents

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

***

### 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](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 300

***

### streetViewControl

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

***

### styleClass

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

***

### useGoogleMapCluster

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

***

### useGoogleMapDirections

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

***

### visible

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

***

### zoomControl

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

***

### zoomLevel

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

***

## Events

### onMapEvent(event,latLng)

Called when a map event occurs.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the marker event.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)} \[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](/reference/servoycore/dev-api/js-lib/number.md)} \[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](/reference/servoycore/dev-api/js-lib/string.md)} address The address to center the map on.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/number.md)} lat The latitude coordinate.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} lng The longitude coordinate.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/object.md)} markerId The unique identifier for the marker.
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} addressOrLatLng The address string or latitude/longitude coordinates for the marker position.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[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](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)} 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](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)} \[index] Starting point where to add the markers

***

### refresh()

Refresh google maps

**Example:**

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

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

***

### removeAllMarkers()

Remove all google markers

**Example:**

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

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

***

### removeMarker(index)

Remove google marker at given index

**Example:**

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

**Parameters:**

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

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: 0
* lng
  * The longitude value.
  * **Type**: [double](/reference/servoycore/dev-api/js-lib/number.md)
  * **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](/reference/servoycore/dev-api/js-lib/string.md)
* distance\_meters
  * The distance of the leg in meters.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* duration
  * The duration of the leg as a formatted string.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* duration\_seconds
  * The duration of the leg in seconds.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* end\_address
  * The ending address of the leg.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* end\_markerId
  * The markerId of the ending marker.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)
* start\_address
  * The starting address of the leg.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* start\_markerId
  * The markerId of the starting marker.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)

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

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

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

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/google-maps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.