Maps by Google and Apple

Choose Your Provider
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.
Properties
Add Google Maps API Key
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. 
Generate a Google Maps API Key
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.
Add Google Maps API Key to Thunkable 
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. 
Map
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
Layout
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
Style
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
Edit Map size
For more information on sizing in your app, please see our introduction here​​
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
Add Spacing
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 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
​
​
Blocks
Events
The map has several events. You can trigger actions to happen when these events occur.
On Map Ready
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.
On User Location Change
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
    }
}
On Press
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
On Long Press
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
On Marker Press
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
}
Functions
Add 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
Add Icon Marker
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
Dropdown menu (select asset)
Add Polyline
Add a polyline to your map. This is an outline 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.
List of objects. Each object must have the properties latitude and longitude. Latitude and Longitude must be numbers.
Stroke Width
Width of polyline
Number
Stroke Color
Color of polyline
Color
 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 Polygon
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.
List of objects. Each object must have the properties latitude and longitude. Latitude and Longitude must be numbers.
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.
Delete Markers, Polylines and Polygons
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.
Properties
Set and get properties of the Map component.
Latitude
Longitude
Zoom
Computed Height
Returns the height of the Map on the device screen in pixels.
Computed Width
Returns the width of the Map on the device screen in pixels.
Visible
​
See Also
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:

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

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	Dropdown menu (select asset)

Location

Location Sensor

Last modified 2mo ago

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
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

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

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

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