Skip to main content

Map

This page explains how to use the Map widget(powered by Google Maps API) to display location data and enable users to add markers, search, and select locations on the map.

IMPORTANT

If you want to use the Map widget on your self-hosted instance, it's essential to have Google Maps configured on your instance. For more information, see Configuring Google Maps.

Using the Map Widget

Display location

To display a specific area on the Map widget, you can set the Initial location property by selecting a location from Google's autocomplete suggestions. For instance, if you want to show New York City as the initial location on the Map widget, you can either select it from Google's autocomplete suggestions or define its location using JavaScript, like:

{
"lat": 40.7127753,
"long": -74.0059728,
"title": "New York, NY, USA"
}

Add markers

You can use markers on the Map widget to showcase precise locations or display multiple locations at once. To add markers to the Map widget, define an array of markers with latitude, longitude, title and optional color keys, and set it in the Default markers property. For example:

[
{
"lat": 25.122, // latitude of the location
"long": 50.132, // longitude of the location
"title": "Location1", // title or name of the location
"color": "green" // color of the marker representing the location
}
]

This would display markers at the specified coordinates with the specified titles and colors.

Additionally, you can display dynamic data from queries or JS functions by binding the response to the Default markers property.


Example 1: suppose you want to display the location of a user when you select a row in a table.

  1. Fetch data from the sample database users using a SELECT query fetchUserData.

  2. Display the data by binding the query response to the Table Data property of the Table widget tblUserData, as shown below:

{{fetchUserData.data}}
  1. In the Default markers property, add:
[
{
"lat": {{parseFloat(tblUserData.selectedRow.latitude)}},
"long": {{parseFloat(tblUserData.selectedRow.longitude)}},
"title": "{{tblUserData.selectedRow.name}}",
"color": "blue"
}
]

This creates a map marker using the latitude and longitude values from the database. In addition, the marker is given a title and is displayed in blue color.

Example 2: suppose you want to display multiple markers on a Map using the locations from the users' database.

To do this, you can use thefetchUserData query to retrieve the data and then transform the data into an array of objects containing latitude, longitude, and title properties using a map() function, and then set it in the Default markers property to display all the locations together on the map.

{{fetchUserData.data.map(loc  => {
return {
lat: parseFloat(loc.latitude),
long: parseFloat(loc.longitude),
title: loc.name
}
})}}

Live location

If you want to display the live location on a map, you can use the Default Marker property to set a marker at your current latitude and longitude coordinates. To do this, you can use the following code:

[{
"lat":{{appsmith.geolocation.currentPosition.coords.latitude || ""}},
"long":{{appsmith.geolocation.currentPosition.coords.longitude || ""}}
}]

To fetch the current location, use appsmith.geolocation.watchPosition() action triggered by a Button widget's onClick event.

Search and tag location

Enabling the Search Location property on a map allows users to search and select a specific location on the map. This can be achieved using Google Autocomplete, which suggests potential locations as the user types in the search bar.

To access the searched location, use the center reference property. This returns the latitude and longitude coordinates of the location. To display the searched location on the map, add the following code to the Default markers property:

[
{{Map1.center}}
]

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

Widget properties

These properties allow you to edit the Map widget. All of these properties are present in the property pane of the widget.

PropertyData typeDescription
Initial locationObjectThis property sets the default location that the map should focus on.
Default markersArrayThis property sets an array of default markers.
Map & Marker CentringBooleanControls whether the clicked marker is centred on the map.
Enable search locationBooleanThis property enables a search bar on the map which users can use to navigate
Enable pick locationBooleanThis property allows users to select a location on the map and moves the map marker to this location. The selectedMarker field is populated with this marker.
Create new markerBooleanThis property enables scrolling within the contents of each tab
VisibleBooleanControls widget's visibility on the page.
Animate LoadingBooleanAllows you to control a widget’s animation on the page load.
Zoom LevelNumberSets the default zoom level of the map
Enable clusteringBooleanEnabling clustering groups nearby markers into a cluster

Reference properties

These properties allow you to bind your select widget with any other widget in queries or JS objects. For instance, you can use Map1.isVisible to get the visibility status.

PropertyData typeDescription
selectedMarkerObjectThis contains the marker object selected by the user
markersArrayThis contains the list of markers on the map
isVisibleBooleanThis property indicates whether the widget is visible.
centerObjectThis property contains latitude and longitude coordinates of the location.

Style properties

Style properties allow you to change the look and feel of the widget.

PropertyData typeDescription
Border RadiusStringAllows you to define curved corners.
Box ShadowStringAllows you to choose from the available shadow styles.

Events

When the event is triggered, these event handlers can run queries, JS code, or other supported actions

EventsDescription
onMarkerClickSets the action to be run when the user clicks a marker on the map.
onMarkerCreatedSets the action to be run when the user creates a new marker on the map.