The map component enables users to display a map on the app. It can be used to display or choose a single location or multiple locations on the map. The map component can be used to display the location of a business, a store, or a restaurant. It can also be used to display the location of a user on the map. It allows users to interact with the map interface and pick specific points of interest.
If you are utilizing the self-hosted version of ToolJet, it is necessary to configure the Google Maps API key as an environment variable. Please refer to the environment variable setup documentation.
|Initial location||default location when the app is loaded initially.||An object containing the latitude and langitude as key value pairs. ex: |
|Default Markers||Number of markers that should be shown on the map||An array of objects containing the coordinates. ex: |
|Polygon points||Create a polygon on the map using the given coordinates.||An array of objects containing the coordinates. ex: |
|Add new markers||On clicking the map, a new marker will be added to the map.||By default, it's set to |
|Search for places||Enable to show the search box on the map.||By default, it's set to |
|On bounds change||Triggers when the bounding area is modified. This event occurs after the |
|On create marker||Triggers when a new marker is added to the map.|
|On marker click||Triggers when the user clicks on any of the markers on the map.|
|On polygon click||Triggers when the user clicks on the polygon on the map.|
For detailed information about all the available Actions, please refer to the Action Reference documentation.
A Tooltip is often used to specify the extra information when the user hovers the mouse pointer over the component. Once a value is set for Tooltip, hovering over the element will display the specified string as the tooltip text.
|Show on desktop||Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on Fx to set the value |
|Show on mobile||Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on Fx to set the value |
|Visibility||Toggle on or off to control the visibility of the component.||You can programmatically change its value by clicking on the |
|Disable||This is ||You can also programmatically set the value by clicking on the |
|Box shadow||Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color.||You can also programmatically set the value by clicking on the |
Exposed variables can be used to get data from the component.
|center||This variable will hold the latitude, longitude and the google map url value.|
|center.||This variable holds the latitude value of the marker on the map component. You can access the value dynamically using JS: |
|center.||This variable gets updated with RGB color code whenever a user selects a color from the color picker. You can access the value dynamically using JS: |
|center.||This variable holds the URL of the location where the center marker is placed on the map component. You can access the value dynamically using JS: |
|markers||The markers variable will hold the value only if |
|selectedMarker||Object with the marker selected by the user|
|bounds||It constructs a rectangle from the points at its south-west and north-east corners|
|bounds.northEast||It holds the latitude and longitude of the north-east corner of the rectangle. You can access the value dynamically using JS: |
|bounds.southWest||It holds the latitude and longitude of the south-west corner of the rectangle. You can access the value dynamically using JS: |
Component specific actions (CSA)
Following actions of map component can be controlled using the component specific actions(CSA):
|setLocation||Set the marker's location on map using latitude and longitude values as parameteres via a component-specific action within any event handler. Additionally, you have the option to employ a RunJS query to execute component-specific actions such as: |