---
title: Add a Google map
description: Add a Google Maps API key and place a styled map with an overlay on any page.
url: "https://flatsome.com/docs/google-map"
lastUpdated: 2026-09-30
---

The **Map** block embeds an interactive Google map with a marker at your location, a color tint to match the site, and an optional overlay for the address and a directions button. Google requires an API key.

## Add the API key

1. Create a key in the [Google Cloud console](https://developers.google.com/maps/documentation/javascript/get-api-key) with the **Maps JavaScript API** enabled. Restrict it to your domain so nobody else can use it.
2. Go to **Flatsome → Settings → Integrations**, paste it into **Google Maps API Key**, and save.

## Place the map

1. Insert the **Map** block.
2. Enter **Latitude** and **Longitude**. Right-click your location in Google Maps to copy the coordinates.
3. Set **Zoom** and **Height**, and turn off **Pan** if the map should stay put when visitors scroll over it.

The marker sits at the coordinates you entered. Under **Style**, pick a **Color** tint and lower the **Saturation** for a muted map that fits the design. **Controls** lets you place or hide the zoom, map type, street view, and fullscreen buttons.

## Add an overlay

Insert the **Overlay** block inside the map. It comes with a heading, a short text, and a **Get Directions** button; link the button to a Google Maps URL for your address. Set its **Width** and drag it into position.