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

Web Development & Design
Surfer AI - Best All-in-one Assistant

- Your article will be ready in less than 20 minutes and it will be 10 times cheaper than using a dedicated writer.
- Create ready-to-rank articles in minutes with Surfer AI.
- Research, write, and optimize across industries with the click of a button.

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 BuilderA Google Map embedded on a website built with Breakdance Builder

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="!1m18!1m12!1m3!1d11662.154782524349!2d-76.14358015!3d43.051136549999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!!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.’

Refresh your web page. On your Breakdance editor, you ought to now see the Google map show.

five. Alter the width and height of your map. You can also modify the padding dimension to lessen the area amongst factors.

six. Your ‘Contact Us’ web page ought to now seem like this.

Troubleshooting Mistakes

When making use of a Google Map API essential, it is typical to experience an error like this: 

“Google maps platform rejected your request. This API task is not authorized to use this API.”

This takes place when some APIs necessary to entry the map are not enabled.

To fix this problem, go to your Google Cloud account. Click ‘Console’ on the best correct side of the web page. 

Then, go to ‘Enabled APIs &amp Providers.’ 

On your API library, make certain that these APIs are enabled:

  • Google Maps JavaScript API
  • Google Maps Geocoding API
  • Google Maps Locations API

And which is it! Depart a comment if you have any queries!