Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place DocsAcademy
Drag and Drop
Drag and Drop
  • What is Thunkable?
  • 🗺️Getting Started
    • Gen AI
      • Prompt Engineering
      • AI tools
      • AI Chatbot Helper
      • AI Template Generator
    • Getting Started Guide
    • Keyboard Shortcuts
    • Undo Redo
    • Thunkable Account
      • Account Management
    • Preview and Test your App
    • Versioning
    • Data Sources
      • Google Sheets Data Source
      • Airtable Data Source
      • Webflow Data Source
      • Local Table Data Source
    • Project Collaboration
      • Organizations
    • 🎓Sample Apps & Tutorials
      • Thunkable Community Forums
      • Sample Apps
      • Video Tutorials
        • Thunkable Live App
          • How to Test and Troubleshoot with Thunkable Live App
        • Data Source Tutorials
          • Connecting to Data Sources
            • Google Sheets
            • Local Table
          • Create Data in a Thunkable Data Source
          • Read Data in a Thunkable Data Source
          • Update Data in a Thunkable Data Source
          • Delete Data in a Thunkable Data Source
        • User Auth & Management
          • Firebase
            • User Sign-Up, Sign-In, and Auth
            • User Sign Out and Password Reset
          • Google
            • User Sign-Up, Sign-In, Sign-Out, and Auth
          • Apple
            • User Sign-Up, Sign-In, Sign-Out, and Auth
        • Projects
          • How to Save Versions of Your Thunkable Project
          • How to Copy and Customize Public or Sample Thunkable Projects
        • User Interface & Design
          • Screens
            • Save and Reuse Thunkable Screens
            • Change Thunkable Screens with a Button Click
            • Create Scrollable Screens in Your Thunkable App
          • Navigators
            • How to Use the Thunkable Stack Navigator
            • How to Use Thunkable Top and Bottom Tab Navigators
            • How to Use the Thunkable Drawer Navigator
            • Combine Figma Frames with Thunkable Navigators
          • Components
            • How to Use the Visibility Property to Create Modals in Thunkable
          • Data Visualization
            • Customize a Data Viewer
          • Text
            • Implement Text Input Validation
        • Alerts & Notifications
          • Display Alert Messages in Your Thunkable App
          • How to Create Three-Button Alert Messages
        • Files
          • Cloudinary
            • Store and Access Cloudinary Files in Your Thunkable App
        • Camera
          • How to Use the Device’s Camera
          • How to Use the Device’s Video Camera
          • Use the Device’s Camera as a QR or Barcode Scanner
        • Realtime Databases
          • Firebase
            • How to Read Data in a Firebase Realtime Database
            • How to Update Data in a Firebase Realtime Database
        • Advanced Blocks
          • Connect Your Thunkable App to a Web API
        • Thunkable Academy
          • Building Your First Thunkable App
            • Getting Started with Thunkable
            • How to Design a Thunkable App
            • How to Connect a Thunkable App to a Data Source
            • How to Make A Thunkable App Interactive with Blocks
          • Thunkable No Code App Creation Basics
            • Thunkable UI Components and App Features
            • Understanding Thunkable's Drag and Drop Block Builder
            • Design, Develop, Debug, and Deploy Your App
        • Hour of Code
          • 2021 - Build an Informational App
          • 2022 - Build a Scavenger Hunt App
          • 2023 - Build a Translator and Text-to-Speech App
        • App Building
          • How to Build a Translation App in Thunkable
          • How to Create an Image Recognition App with Thunkable
          • How to Create a Text-to-Speech App in Thunkable
  • 🎨App Design
    • User Interface (UI) Components
      • Basic Components
        • Button Component
        • Label Component
        • Rich Text Component
        • Image Component
        • Text Input Component
        • Layout Component
        • Group Component
      • Data Components
        • Simple List Component
        • Data Viewer Components
          • Data Viewer List Component
          • Data Viewer Grid Component
          • Custom Data Viewer
      • Input Components
        • Switch Component
        • Slider Component
        • Checkbox Component
        • Date Input Component
        • Time Input Component
      • Media Components
        • Animation Component
        • Video Component
        • Loading Icon Component
      • Embed Components
        • Web Viewer Component
        • Map Component
        • Canvas Component
        • PDF Reader Component
        • Rating Component
      • Modules
        • Introduction
        • User Guide
      • Generative AI
    • Screens
      • Save and Reuse Screens
      • Improve Thunkable Load Time
    • Navigators
      • Top Tab Navigator
      • Bottom Tab Navigator
      • Drawer Navigator
      • Stack Navigator
    • Figma Integration
  • 🛠️Blocks
    • Thunkable Blocks Overview
    • Core Blocks
      • Control Blocks
      • Logic Blocks
      • Math Blocks
      • Text Blocks
      • Lists Blocks
      • Color Blocks
      • Device Blocks
      • Objects Blocks
      • Variables Overview
        • Connect a Firebase Realtime Database
        • Variables Blocks
      • Functions Blocks
    • App Features Blocks
      • Speech Blocks
      • Sound Blocks
      • Share Blocks
      • Camera Blocks
      • Files Blocks
      • Sign In Blocks
        • User Sign Up, Sign In, and Authentication with Firebase
        • User Sign Up, Sign In, and Authentication with Google
        • User Sign Up, Sign In, and Authentication with Apple
      • Location Blocks
      • Push Notification Blocks
      • In-App Purchase Blocks (with RevenueCat)
      • Data Sources Blocks
      • Alerts Blocks
      • Timer Blocks
      • Sensors Blocks
        • Gyroscope
        • Magnetometer
        • Accelerometer
        • Location Sensor
      • Ads by AdMob
    • Advanced Blocks
      • Web APIs Blocks
        • CORS Policy
        • 🆓No Auth APIs
          • Update Data in a Data Source
          • CRUD Operations
          • Setting Headers
        • 📊Charting APIs
          • Create a chart template
          • Charting in Thunkable
      • Bluetooth Low Energy Blocks
      • OpenAI Services ChatGPT Integration Blocks
      • "Any Component" Blocks
      • JavaScript Web Bridge
  • ⚙️Settings
    • App Settings
      • Tablet View
    • Assets
    • Cloud Variable Viewer
    • Manage your Projects
      • My Projects Page
      • Thunkable Projects
      • Duplicate Project
      • Share Your App
      • Download Your App
        • Download Your App on iOS
        • Download Your App on Android
      • Add to Home Screen
      • Managing Project Storage
      • App Data Privacy
      • Delete Project
  • 📱Publishing
    • Overview
    • Publish to the Apple App Store
      • User Guide
      • Troubleshooting
      • Review Process
      • Tracking Usage Description
    • Publish to Google Play Store
      • User Guide
      • Troubleshooting
      • Review Process
    • Publish as a Web App
      • User Guide
      • Custom Domains
      • Troubleshooting
    • Testing
      • Testing on iOS via TestFlight
      • Testing on Android
    • Troubleshooting
      • Publishing Checklist
      • Generate Screenshots
  • 🎮Gaming
    • Gaming Overview
      • Canvas Label
      • Sprites
      • Sprite Gallery
    • Gaming Blocks
      • Events
      • Motion
      • Looks
      • Direction
      • Sensing
      • Add & Remove
      • Stage
  • 🗃️Additional Resources
    • Release Notes
      • Release Notes 2025
      • Release Notes 2024
      • Release Notes 2023
    • Troubleshooting
      • Can't Sign in to Thunkable?
      • FAQs
    • Minimum Requirements
    • Bugs and Product Feedback
    • App Services and Emulators
Powered by GitBook
On this page
  • Overview
  • Properties
  • Add Google Maps API Key
  • Map
  • Advanced Properties
  • Layout
  • Style
  • Blocks
  • Events
  • Functions
  • Properties
  • See Also

Was this helpful?

Export as PDF
  1. App Design
  2. User Interface (UI) Components
  3. Embed Components

Map Component

PreviousWeb Viewer ComponentNextCanvas Component

Last updated 1 year ago

Was this helpful?

Overview

The Map component lets you show an area of a Google map to the user. You can add , , and to this map.

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

Advanced Properties

Property
Description
Data Type

Provider

Map provider (ex. Google).

Text

Map Type

Style of map.

Select from list (standard, satellite, hybrid, terrain, none)

User location

Show the user where they are on the map.

True/False

My location button

Show button that allows the user to re-center the map on their location.

True/False

Compass

Show compass.

True/False

Scroll

Allow user to scroll on the map.

True/False

Zoom

Allow user to zoom in and out on the map.

True/False

Traffic

Show traffic data.

True/False

Layout

Property
Description
Data Type

X

Location of top left corner of Map on X-axis, where the left hand side is X=0

Number

Y

Location of top left corner of Map on Y-axis, where the top side is Y=0

Number

Height

Height of Map in pixels

Number

Width

Width of Map in pixels

Number

Resize Mode

Define dimensions of the map component/container

Select from list [Stretch, Float in Place]

Style

Property
Description
Data Type

Visible

Toggle whether your end users can see the Map

True/False

Border Style

Set whether border style is solid, dotted or dashed (only visible if border width > 0)

Select from list [solid, dotted, dashed]

Border Color

Color of border (only visible if border width > 0)

Color

Border Width

Width of border around Map in pixels

Number

Border Radius

Radius of corners of border on Map in degrees

Number

Shadow Color

Color of map's shadow

Color

Shadow Opacity

Opacity of map's shadow

Number between 0 and 100

Shadow Radius

Radius of corners of map's shadow in pixels

Number

Shadow Offset

How far map's shadow should be offset, in Height and Width, in pixels

Number

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.

Add GeoJSON

GeoJSON is a format for encoding geographical data structures that is based on the JSON (JavaScript Object Notation) format. It is a lightweight and versatile format that is widely used for storing and exchanging spatial data. GeoJSON provides you with a simple and flexible way to add geographic data to your Google Maps app, making it easy to create engaging and informative map-based applications.

Incorporating GeoJSON in your Thunkable Map component allows you to draw lines, shapes (rectangles, triangles, squares, and custom shapes), and markers on the map.

We do not currently support adding GeoJSON tooltips or callouts.

To use the Add GeoJSON block:

  1. On the Design tab of your Thunkable project, add a map component to a screen.

  2. On the Blocks tab, within the component tree, click the Map component.

  3. Drag and drop the Add GeoJSON block into your workspace.

  4. Click Text.

  5. Drag the empty text block and connect it to the Add GeoJSON block.

  6. Drag and drop the Add GeoJSON block into an event block. For example, the onMapReady block to render the GeoJSON when the map loads, or the when button click block to render the GeoJSON when the user clicks a button.

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 GeoJSON

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 on the left of 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.

Paste your GeoJSON data into the empty text block. This can be retrieved from a website such as .

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
GeoJSON.io
object blocks
object blocks.
markers
polylines
polygons
properties
Location Sensor
asset
objects
numbers
objects
numbers
markers
polylines
polygons