---
title: "Map components"
date: "2020-11-19T10:54:57+00:00"
summary: "Discover how to easily add Google Maps to your Site Studio layouts with our map components guide. Learn about layout elements, form options, and essential setup steps for creating interactive, multi-marker maps."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/map-components"
id: "934c9585-f00a-4591-ac06-0c41031adbdd"
---

Important

You must have entered your Google Maps API key within the Site Studio > **Google Maps API key** page to use the Google map component.

The Google map component is for adding a Google map with one or multiple map markers to a layout. 

Layout canvas elements
----------------------

*   Google map - Provides the google map.
*   Pattern repeater - Allows for multiple pins to be added to the map. The Pattern repeater is linked to the Field repeater in the Component form.
*   Google map marker - Provides the individual map markers and the content for the marker info windows.

Component form elements
-----------------------

Important

The fields within the **Content tab** of the component form are included within a **Field repeater.** This provides the functionality to add multiple pins. 

*   **Google map marker** - This provides a group of fields used to enter the location of the map marker.
*   **Marker info window** - A Formatted text box for providing map marker information.
*   **Map aspect ratio** - Sets the aspect ratio of the map.
*   **Space below map -** Adds a margin to the bottom of the container around the buttons. This is required to separate the map from content that might be placed below it.