📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • Choose Your Provider
  • Properties
  • Add Google Maps API Key
  • Map
  • Layout
  • Style
  • Edit Map size
  • Add Spacing
  • Blocks
  • Events
  • Functions
  • Properties
  • See Also

Was this helpful?

Export as PDF

Maps by Google and Apple

PreviousLocationNextLocation Sensor

Last updated 2 years ago

Was this helpful?

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

Add Google Maps API Key to Thunkable

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

Shows Traffic Advanced

Default (false); if true, shows real-time traffic overlay on the map

Edit Map size

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

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

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

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.

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.

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

Properties

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

These blocks will set the map's latitude and longitude to show the user's location once the map is ready:

Select Enable all Google Maps APIs for this project.

For more detailed instructions, please see here: .

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 . Scroll to the Google Map Settings section and paste your Android and iOS API keys into the corresponding fields.

Accepts a JSON string imported from the . Map Type must be set to standard and provider must be set to google.

For more information on sizing in your app, please see our

For more information on adding spacing in your app, please see our

This event happens when the location of the user changes. It returns the coordinate object. You can use to get the properties of the coordinate object.

The On Marker Press block returns an event object. This is an object which can be used with

Dropdown menu (select )

List of . Each object must have the properties latitude and longitude. Latitude and Longitude must be .

List of . Each object must have the properties latitude and longitude. Latitude and Longitude must be .

You can use the deleteAllMarkers block to delete all from your app.

You can use the deleteAllPolylines block to delete all from your app.

You can use the deleteAllPolygons block to delete all from your app.

Set and get of the Map component.

You can pair the Map component with a . This helps you show content relevant to the user's location.

Google Maps Platform: Set up your Google Cloud project
Project Settings
introduction here​
introduction here
object blocks
object blocks.
Location Sensor
markers
polylines
polygons
properties
Google Maps API styling wizard
objects
numbers
objects
numbers
asset