Adding Google Maps Elements in Breakdance Builder: A How-To Guide

Require to demonstrate your consumers precisely the place you are? In just a handful of minutes you could include dynamic Google Maps immediately to your WordPress web sites

Embedding a Google Map on your web site is a essential function for companies to create believe in, supply comfort, and drive foot site visitors immediately to their spots.

In this tutorial, I will guidebook you by means of incorporating a Google map to your web site making use of Breakdance Builder.

A Google Map embedded on a website built with Breakdance Builder

Table of contents

Strategy one: Use Customized Code
Strategy two: Use the Google Map Block in Breakdance
Troubleshooting Mistakes

Strategy one: Use Customized Code

Including a customized code to your web page is the simplest strategy of immediately placing a map on your web site, and provides you a handful of alternatives to tweak how it is formatted.

Right here are the measures you ought to stick to:

one. Go to Google Map &amp Enter Company Spot

two. Click the share icon. Go to ‘Embed a map’ and click ‘COPY HTML.’ This will copy the map’s supply code into your clipboard.

three. Open your ‘Contact Us’ or web page you happen to be searching to include a map on inside of Breakdance.

four. Include a new area just over the get in touch with type area (or wherever the map ought to go).

five. On the left-hand side of the editor, search for the Code Block component and include it to your web page.

six. There are numerous approaches to include customized codes in Breakdance. But in this illustration, we’ll be making use of the ‘PHP Code’ block to include our HTML code from the Google map. You can include HTML in the PHP block and it will perform as typical.

So, go ahead and click this block. Then, kind the following code (this is an illustration area):

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11662.154782524349!2d-76.14358015!3d43.051136549999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.one!3m3!1m2!1s0x89d9f3a94e83f78d%3A0x2987e88a6782015c!2sDominick%E2%80%99s%20Market!5e0!3m2!1sen!2sus!4v1690828016506!5m2!1sen!2sus" width="one hundred%" height="450" type="border:" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

You ought to now see the map displayed on your web page.

seven. If you want to alter the width and height of your Google map, basically edit the ‘width’ and ‘height’ attributes on your HTML code. Want it to cover the total display? Alter width=”1000” to width=”100%”

eight. Alter the layout of your area as necessary.

9. Here’s the last seem of our get in touch with web page embedded with a Google map.

Strategy two: Use the Google Map Block in Breakdance

Breakdance delivers hundreds of builder factors that you can use to create your website. This contains a Google Map block.

Including a Google map to your web page is a easy procedure. Here’s what you need to have to do:

one. On your WordPress dashboard, go to ‘Pages.’ Open the web page the place you want to embed a Google map. In this illustration, we’ll use the ‘Contact Us’ web page.

two. Let’s attempt to include a Google map over our get in touch with information and type. To do that, let’s 1st include a ‘Section’ to our web page.

three. On the left-hand side of the editor, search for the ‘Google Map’ block and click it.

four. When you are attempting to include a Google map to your website for the 1st time, you may well experience an error like the 1 beneath.

The cause for this is that you need to have to create an API essential to use the support. An API is just a set of protocols utilized by computer software applications to interact with every single other. In this situation, we want our WordPress website to talk with the Google Map application.

To create an API essential, go to Google Maps Platform. Click ‘Get Started out.’ You will be prompted to indicator in making use of your Google account.

Note that you will also be essential to supply your billing details to get a free of charge API. As lengthy as you will not go past their $200 free of charge credit score per month, you will not be charged.

When the registration is full, you ought to be ready to acquire your API essential. Go ahead and copy this to your clipboard.

On your WordPress dashboard, go to Breakdance &gt Settings &gt API keys. Then, paste your API essential into the ‘Google Maps API Key’ discipline. Click ‘Save Alterations.’