# Map Component

## Overview

The Map component lets you show an area of a Google map to the user. You can add [markers](#add-marker), [polylines](#add-polyline), and [polygons](#add-polygon) to this map.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhyDC7BSDDaJQTJGnEZ%2F-MhyDX_jK0fnUZR2Qrp3%2Fmaps.png?alt=media\&token=7ff15099-9899-472c-b918-9d09069a1037)

## 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.&#x20;

#### 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. &#x20;
4. Select **Enable all Google Maps APIs for this project**.\
   ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGbXdZ3fJqj5FVTHjd0Wh%2FGoogle%20Maps%20API%202.png?alt=media\&token=efaa9ff3-73c8-4134-b086-60fd091617ce)
5. Copy the provided API key.&#x20;

{% hint style="info" %}
**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**.<br>

   <figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FkAOsoKtT4W7haiMqz3M4%2FGoogle%20Maps%20API%20show%20key%202.png?alt=media&#x26;token=77201280-d4f6-463b-83c1-57c9602d680f" alt=""><figcaption></figcaption></figure>

{% endhint %}

For more detailed instructions, please see here: [Google Maps Platform: Set up your Google Cloud project](https://developers.google.com/maps/documentation/android-sdk/cloud-setup).

#### Add Google Maps API Key to Thunkable&#x20;

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](https://docs.thunkable.com/settings/project-settings). Scroll to the **Google Map Settings** section and paste your Android and iOS API keys into the corresponding fields.&#x20;

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F3xCsAeUDA3gvy1VUdbsj%2Fproject%20settings%20%3E%20Google%20Maps%20Settings.png?alt=media\&token=de4e65ad-ec32-4d21-af6a-f1e103c532a8)

### 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.&#x20;

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.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm1Kgoc6OY6Tr1vFSc%2FScreen%20Shot%202021-04-08%20at%204.10.55%20PM.png?alt=media\&token=98424ab5-52e1-4f9a-8e24-d6f909a61a27)

#### **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.&#x20;

{% hint style="warning" %}
We do not currently support adding GeoJSON tooltips or callouts.
{% endhint %}

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](http://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.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FhsJ1cC95gkC4DKrbLI0z%2FGeoJSON%20blocks%20v2.png?alt=media&#x26;token=6b33ee54-9883-4ac6-a581-cb4f5a437ecd" alt=""><figcaption></figcaption></figure>

#### On User Location Change

This event happens when the location of the user changes. It returns the **coordinate** object.\
You can use [object blocks](https://docs.thunkable.com/blocks/blocks/objects) to get the properties of the coordinate object.

The **coordinate** object has the following properties:

**{**\
&#x20;   **target:** Numeric ID for your app\
&#x20;   **coordinate:{**\
&#x20;         **latitude:** latitude of point selected\
&#x20;         **longitude:** longitude of point selected \
&#x20;   **}**\
&#x20;   **position:{**\
&#x20;         **x:** x-position of selected point on the Map component\
&#x20;         **y:** x-position of selected point on the Map component\
&#x20;   **}**\
**}**

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm1meHqHyzV12FT5fs%2FScreen%20Shot%202021-04-08%20at%204.12.54%20PM.png?alt=media\&token=af26b655-0e01-4391-aaab-ff58ef376e1f)

#### On Press

This event happens when the user taps on the Map.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MBpVvP62WZTrcDW9OCp%2F-MBpWh2aLcgKOenP4ip0%2Fmaponpressnew.png?alt=media\&token=68212f24-6dae-4ba6-aaa0-8b7558622ccb)

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

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MBpVvP62WZTrcDW9OCp%2F-MBpX5SwUBCTqQdkx-LA%2Fmaponlongpressnew.png?alt=media\&token=fd5fac3c-abdb-4f3b-babf-a0fa3ec6d351)

| 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.](https://docs.thunkable.com/blocks/blocks/objects)&#x20;

The **event** object has the following properties:

{\
&#x20;   **latitude:** latitude of the selected Marker\
&#x20;   **longitude**: longitude of the selected Marker\
}

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm1zIvNR7KuH81lFQI%2FScreen%20Shot%202021-04-08%20at%204.13.46%20PM.png?alt=media\&token=8a2e0eda-7fec-42dd-a11d-ae3a55d8064a)

### Functions

#### Add Marker

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

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FB8RNBPVd2i2cHuAgrAQk%2Fmapaddmarker.png?alt=media\&token=4a34acba-7793-4f54-9e54-422e9c47b925)

This block takes the following inputs:

<table><thead><tr><th width="150">Input</th><th width="310.2755707033053">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>Latitude</td><td>Latitude of marker's position</td><td>Number between -90 and 90</td></tr><tr><td>Longitude</td><td>Longitude of marker's position</td><td>Number between -90 and 90</td></tr><tr><td>Title</td><td>Title of marker (displayed when marker is clicked)</td><td>Text</td></tr><tr><td>Description</td><td>Description of marker (displayed when marker is clicked)</td><td>Text</td></tr><tr><td>Pin Color</td><td>Color of marker</td><td>Color</td></tr></tbody></table>

#### Add GeoJSON

#### Add Icon Marker

Adds a marker of a selected image to your map at the specified latitude/longitude

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F4dKZnttEmqryC2kP2hyE%2Faddiconmarker.png?alt=media\&token=9e141678-8057-4fe4-af36-a4d7fdca477d)

This block takes the following inputs:

<table><thead><tr><th width="150">Input</th><th width="310.2755707033053">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>Latitude</td><td>Latitude of marker's position</td><td>Number between -90 and 90</td></tr><tr><td>Longitude</td><td>Longitude of marker's position</td><td>Number between -90 and 90</td></tr><tr><td>Title</td><td>Title of marker (displayed when marker is clicked)</td><td>Text</td></tr><tr><td>Description</td><td>Description of marker (displayed when marker is clicked)</td><td>Text</td></tr><tr><td>Icon</td><td>Image to use as marker</td><td>Dropdown menu (select <a href="../../../../settings/assets#uploading-and-managing-assets">asset</a>)</td></tr></tbody></table>

#### 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](https://docs.thunkable.com/blocks/blocks/objects). Each object must have the properties `latitude` and `longitude.` Latitude and Longitude must be [numbers](https://docs.thunkable.com/blocks/blocks/math). |
| Stroke Width | Width of polyline                                              | Number                                                                                                                                                                                                                         |
| Stroke Color | Color of polyline                                              | Color                                                                                                                                                                                                                          |

&#x20;These blocks:

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-Mhy4okD_eftTIerq0g9%2Fpolyline.png?alt=media\&token=f579e715-7a2e-4d9d-853a-0d17330460d5)

Will produce this polyline:

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-Mhy58yzvFvX_psLd3Kp%2Fpolyline.jpeg?alt=media\&token=e1c725d0-4435-4a40-88a3-43e11bc77d61)

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](https://docs.thunkable.com/blocks/blocks/objects). Each object must have the properties `latitude` and `longitude.` Latitude and Longitude must be [numbers](https://docs.thunkable.com/blocks/blocks/math). |
| 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:

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-Mhy9HhbkeQFkmLS8kJz%2FScreen%20Shot%202021-08-25%20at%205.33.46%20PM.png?alt=media\&token=77c3f71b-f467-40e9-9d94-9cdafc30acd5)

Will produce this polygon:

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-Mhy9QseqtxUd7nnLZbA%2Fpolygon.jpeg?alt=media\&token=54b6fba6-76c3-437c-b5e5-9905bf551f74)

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](#add-marker) from your app.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm10ct3lOYpPRdD8po%2FScreen%20Shot%202021-04-08%20at%204.09.33%20PM.png?alt=media\&token=48143f80-7f3e-4990-991f-449cb4a511ac)

You can use the **deleteAllPolylines** block to delete all [polylines](#add-polyline) from your app.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm17SaYyiu0711unnj%2FScreen%20Shot%202021-04-08%20at%204.10.01%20PM.png?alt=media\&token=7bcc282a-4122-4d66-8442-f17dac47bd7a)

You can use the **deleteAllPolygons** block to delete all [polygons](#add-polygon) from your app.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MXm-VzBm17M2Y4a2Gq1%2F-MXm13zRGmlULSvuTgj5%2FScreen%20Shot%202021-04-08%20at%204.09.45%20PM.png?alt=media\&token=911220bd-475b-4825-a6ca-10cdb53c3080)

### Properties

Set and get [properties](#properties) of the Map component.

#### Latitude

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyC5-qvpaeW8iL1ZcC%2Flat.jpg?alt=media\&token=d03f2745-6e92-467e-b08d-6d2a4cee7d72)

#### Longitude

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyCDjG83HgeVZRK4T3%2Flong.jpg?alt=media\&token=3ec26f51-d814-4675-87ad-d022ca740bd3)

#### Zoom

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyCL8l3suFr7zm0X6C%2Fzoom.png?alt=media\&token=880780ca-a06b-48af-9625-d2b8b8454ef8)

#### Computed Height

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyCTOFXHLv9IManILL%2Fmapheight.png?alt=media\&token=d8cb1682-cdeb-4152-b1fa-4c9d84fe9db2)

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

#### Computed Width

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyCWxN88OYHtqySm8a%2Fmapwidth.png?alt=media\&token=dd8f1853-a38a-4d8c-b401-61bf73e01a46)

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

#### Visible

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyC_uZIwolImSxNysL%2Fmapvisible.png?alt=media\&token=5f692abe-b3af-4764-bade-b30b1bb075be)

## See Also

You can pair the Map component with a [Location Sensor](https://docs.thunkable.com/blocks/app-features/sensors-blocks/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:

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MhxvXEJm7h40PjzRKJD%2F-MhyCxcw7SUFEhd6RnU1%2Fmaponready.png?alt=media\&token=63620545-bd3c-4b05-a150-6501254c6840)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/app-design/ui-components/embed-components/map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
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