Maps by Google and Apple

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.
You can live-test your app without adding your unique Google Maps API keys, but you need to add them if you want to download or publish your app.
To generate your personal Google Maps API key, you need to:
- 1.Create a Google Cloud project for your app.
- 2.Create a billing account or enable billing for the project.
- 3.Click Enable to enable the Maps SDK for Android or Maps SDK for iOS.
- 4.Select Enable all Google Maps APIs for this project.
- 5.Copy the provided API key.
Note: If you close this pop pup message without copying your API key
- 1.Navigate to APIs & Services.
- 2.Select Credentials from the left side menu.
- 3.Click SHOW KEY.
For more detailed instructions, please see here: Google Maps Platform: Set up your Google Cloud project.
Once you've generated your Google Maps API keys, you can add them to your Thunkable project. Click the gear icon at the top of the components tree on your project's designer tab to access your Project Settings. Scroll to the Google Map Settings section and paste your Android and iOS API keys into the corresponding fields.

Property | Description | Data Type |
Latitude | Co-ordinate of the map's center on the north-south axis | Number |
Longitude | Co-ordinate of the map's center on the east-west axis | Number |
Zoom | Zoom level between -15 (most zoomed out) and 15 (most zoomed in) | Number |
Property | Description | Data Type |
Height | Height of Map in pixels | Number |
Width | Width of Map in pixels | Number |
Visible | Set whether the Map is visible | True/False |
Property | Description | Data Type |
Border Width | Width of border around Map in pixels | Number |
Border Radius | Radius of corners of border on Mapr in degrees | Number |
Border Color | Color of border (only visible if border width > 0) | Color |
Border Style | Set whether border style is solid, dotted or dashed (only visible if border width > 0) | Select from menu |
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 Advanced | Default ( standard ); standard is the classic map style; satellite displays only satellite imagery; hybrid shows roads and features layered over satellite imagery; terrain shows physical terrain overlay on top of a classic map (Google Maps only) |
Custom Map Style String (Google Maps Only) Advanced | Accepts a JSON string imported from the Google Maps API styling wizard. Map Type must be set to standard and provider must be set to google . |
Shows Traffic Advanced | Default ( false ); if true , shows real-time traffic overlay on the map |
Property | Description |
Height | Default ( Fill container ); Four options: 1) Fit contents which auto-sizes to the content size or 2) Fill container which auto-sizes to the container 3) Relative size in percent of Screen, 4) Absolute size in pixels |
Width | Default ( Fit container ); Four options: 1) Fit contents which auto-sizes to the content size or 2) Fill container which auto-sizes to the container 3) Relative size in percent of Screen, 4) Absolute size in pixels |
To find the spacing properties, you'll have to select the
Advanced
tabProperty | Description |
Margin Advanced | Default ( none ); Margin is the space outside of the border of a component; You can set space on the top , bottom , right or left of the component in both pixels or percent of Screen |
Padding Advanced | Default ( none ); Padding is the space between the contents and the border of a component; You can set space on the top , bottom , right or left of the component in both pixels or percent of Screen |
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 | Data Type |
Latitude | Latitude of selected position | Number |
Longitude | Longitude of selected position | Number |
position X | X Co-ordinate of selected position on map component | Number |
position Y | Y Co-ordinate of selected position on map component | Number |
This event happens when the user presses on the map for a longer period of time.

Output name | Output value | Data Type |
Latitude | Latitude of selected position | Number |
Longitude | Longitude of selected position | Number |
position X | X Co-ordinate of selected position on map component | Number |
position Y | Y Co-ordinate of selected position on map component | Number |
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 object has the following properties:
{
latitude: latitude of the selected Marker
longitude: longitude of the selected Marker
}

Adds a generic map marker to your map at the specified latitude/longitude.

This block takes the following inputs:
Input | Description | Data Type |
---|---|---|
Latitude | Latitude of marker's position | Number between -90 and 90 |
Longitude | Longitude of marker's position | Number between -90 and 90 |
Title | Title of marker (displayed when marker is clicked) | Text |
Description | Description of marker (displayed when marker is clicked) | Text |
Pin Color | Color of marker | Color |
Adds a marker of a selected image to your map at the specified latitude/longitude

This block takes the following inputs:
Input | Description | Data Type |
---|---|---|
Latitude | Latitude of marker's position | Number between -90 and 90 |
Longitude | Longitude of marker's position | Number between -90 and 90 |
Title | Title of marker (displayed when marker is clicked) | Text |
Description | Description of marker (displayed when marker is clicked) | Text |
Icon | Image to use as marker |
Add a polyline to your map. This is an outline that connects several points on your map.
This block takes the following inputs:
These blocks:

Will produce this polyline:

Note that polylines won't automatically create a closed shape. You would need to add a forth object with the properties
latitude: 37
and longitude: -122
to the coordinate
input of the addPolyline
block above to close this triangular polyline.Add a polygon to your map. This is a solid shape that connects several points on your map.
This block takes the following inputs:
Input | Description | Data Type |
Coordinate | List of points to draw a line between. List can be any length. | |
Stroke Width | Width of outline | Number |
Stroke Color | Color of outline (Only visible if Stroke Width > 0) | Color |
Fill Color | Color of polygon shape | Color |
These blocks:

Will produce this polygon:

Note that the polygon outline will automatically connect the first and last points in the list of coordinates.







Returns the height of the Map on the device screen in pixels.

Returns the width of the Map on the device screen in pixels.

You can pair the Map component with a Location Sensor. This helps you show content relevant to the user's location.
These blocks will set the map's latitude and longitude to show the user's location once the map is ready:

Last modified 5mo ago