Map Component

Overview

The Map component lets you show an area of a Google map to the user. You can add markers, polylines, and polygons 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. Select Enable all Google Maps APIs for this project.

5. Copy the provided API 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 on the left of 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

Advanced Properties

Layout

Style

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.

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. Paste your GeoJSON data into the empty text block. This can be retrieved from a website such as GeoJSON.io.

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

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.

On Long Press

This event happens when the user presses on the map for a longer period of time.

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:

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:

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:

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:

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: