For iOS, you have the option to choose between Apple Maps or Google Maps. On Android, only Google Maps is available. Google Maps provides more custom style options from different map types to coloring and exposing or hiding map features.
Property | Description |
Provider | Default ( |
It is possible to add your own Google Maps API Key to your Thunkable app project.
Simply click on your project name to open the Project Settings menu, and scroll down to the Google Map Settings section. You will see the option to enter a Google Maps API Key for Android and iOS.
You can get your own Google Maps API Key here.
To auto-center your map, you can pair the Map component with a Location Sensor
Property | Description |
Latitude | Default ( |
Longitude | Default ( |
Zoom | Default ( |
Shows User Location | Default ( |
Shows My Location Button (Google Maps only) | Default ( |
To style the Map like the picture above, set Provider to Google
, Shows Traffic to true
, Map Type to standard
and Custom Map Style String to:
[ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "geometry.fill", "stylers": [ { "color": "#ffffff" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#000000" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#d8d8d8" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#e4e4e4" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#f3f3f3" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]
There are a number of Advanced
properties available to help you add custom styling to your map. Below are the most popular.
Property | Description |
Map Type | Default ( |
Custom Map Style String (Google Maps Only) | Accepts a JSON string imported from the Google Maps API styling wizard. Map Type must be set to |
Shows Traffic | Default ( |
For more information on sizing in your app, please see our introduction here
Property | Description |
Height | Default ( |
Width | Default ( |
For more information on adding spacing in your app, please see our introduction here
To find the spacing properties, you'll have to select the Advanced
tab
Property | Description |
Margin | Default ( |
Padding | Default ( |
There are limited styling options for markers at the moment. We are working to add the ability to change colors as well as add custom icons
You can add a standard default marker to your map with the blocks below. The Map component does not yet supply its own latitude and longitude so we currently recommend using the Location Sensor component
To add a polyline, you can use the blocks below where coordinates
need to be in a list of latitude and longitude objects, stroke Width
is an integer and stroke Color
is in hex format
To add a polygon, you can use the blocks below where coordinates
need to be in a list of latitude and longitude objects, stroke Width
is an integer, stroke Color
is in hex format, and fill Color
is in hex format
You can use the deleteAllMarkers block to delete all markers from your app.
You can use the deleteAllPolylines block to delete all polylines from your app.
You can use the deleteAllPolygons block to delete all polygons from your app.
The map has several events. You can trigger actions to happen when these events occur.
This event happens when the Map has loaded in your app. This is a good time to add any markers, polylines or polygons to your app that you want the user to see as soon as your app opens.
This event happens when the location of the user changes. It returns the coordinate object. You can use object blocks to get the properties of the coordinate object.
The coordinate object has the following properties:
target: Numeric ID for your app coordinate:{ latitude: latitude of point selected longitude: longitude of point selected } position:{ x: x-position of selected point on the Map component y: x-position of selected point on the Map component }
This event happens when the user taps on the Map.
Output name | Output value |
Latitude | Latitude of selected position |
Longitude | Longitude of selected position |
position X | X Co-ordinate of selected position on map component |
position Y | Y Co-ordinate of selected position on map component |
This event happens when the user presses on the map for a longer period of time.
Output name | Output value |
Latitude | Latitude of selected position |
Longitude | Longitude of selected position |
position X | X Co-ordinate of selected position on map component |
position Y | Y Co-ordinate of selected position on map component |
This event happens when the user clicks on a Marker that is on the Map.
The On Marker Press block returns an event object. This is an object which can be used with object blocks. The event block has the following properties:
latitude: returns the latitude of the selected Marker longitude: returns the longitude of the selected Marker