The Google Map Element lets you display locations on your Reactive pages using the power of Google Maps. This is perfect for helping customers find your store, office, or any other important location.
Adding a Google Map to Your Page
Drag and drop the Google Map Element onto your page.
If you haven’t set up a Google Maps API key yet, the element will appear greyed out. When you click on it, you’ll see a message prompting you to add your key. Once added, the map will become fully functional.
Setting Up a Google Maps API Key
A Google Maps API key is required for the map element to work. This key allows you to search and display map data on your Reactive pages.
Here’s how to generate one:
-
Go to the Google Cloud Console.
-
Log in with your Google account.
-
Create a new project (or select an existing one).
-
In the left-hand menu, go to APIs & Services > Credentials.
-
Click Create Credentials and choose API Key.
-
Copy the generated key.
-
Back in Reactive, paste the key into the Google Maps API field when prompted.
For more details, see Google’s official guide: Get an API Key.
Main settings
Once you’ve added the Google Map element to your page, you can customize its main settings to adjust how it’s displayed and how it behaves. These settings define the map’s displayed location and layout within your design.
Address. Enter the address of the location you wish to display. Reactive will automatically find the address and add a pin to the map. You can type either an address or a specific location of your business.
Height. Set the height of the map according to your page layout. You can define a fixed height in pixels (e.g., 400px) or use a percentage value so that the map adapts dynamically to different screen sizes.
Width. Specify the width of the map. As with height, you can use either pixels or percentage values.
Spacing
Margin. This setting allows you to control the space around the element's border by changing the top, bottom, left and right values.
Padding. This setting allows you to control the space between the content and borders of the element by changing the top, bottom, left and right values.
Related Articles
How to embed HTML code in Reactive
The Code element is very useful. It allows you to embed custom code directly onto your page, including HTML, CSS, and JavaScript. Adding the Code Element From the left sidebar menu, click and drag the Code component into a dropzone on your page. In ...
How to use the Box Element to style and structure page sections
The Box element is a flexible tool for organizing your page layout, structuring sections, and creating overlays with image or video backgrounds. Adding Boxes to Your Page Boxes are simple to use: From left sidebar menu. Drag and drop the Box element ...
How to Use the Icon Element to Add Icons to Your Page Content
Icons are a simple yet powerful way to enhance your page design. They can quickly communicate meaning, serve as visual alternatives to text, and even act as intuitive button replacements. How to Add an Icon To add an icon, drag the Icon Element from ...
Adding text with the Text Element
The Text Element allows you to add text content right into your page. The Text Element is one of the most powerful elements that Reactive has to offer. It’s one of the most used elements within Reactive! To get started, drag one onto your page. How ...
Create scrolling sections with the Slider Element
The Slider Element is a powerful tool for creating scrolling sections of content on your pages. Each slide is its own container, so you can add and customize elements freely. A common use is building image slideshows to showcase products. Slides per ...