Avada & Google Maps

You are a user of the Avada theme and want to block the map available via the Google Map element in the Avada builder using our Cookie Plugin?

In the following, we will show you how you can block and output the Google Map in a GDPR-compliant manner.

Step 1 - Create Script Blocker

Click the Add New button in the Script Blocker menu.

Set page and search phrase

In the following view you have to select the page where you have embedded the form (e.g. Contact, About us, etc.). Add google-maps-api, google-maps-infobox, map_fusion_map under search phrases. Then click on the Scan button.

After the scan is finished, click the Next button.

Configure Script Blocker and block JavaScript handles and phrases

Now you have to configure the Script Blocker. Enter google-maps under ID and Google Maps under Name. Also set the status to ON.

After that click the Create Script Blocker button.

Copy code for Content Blocker

After the Script Blocker has been created, you must now copy the code for the Content Blocker to the clipboard. We will need it in the second step to add the already existing Content Blocker "Google Maps".

Step 2 - Modify Content Blocker “Google Maps”

Click on the pencil in the "Content Blocker" menu item to edit the existing "Google Maps" content blocker.

Configure Content Blocker

Now go to the JavaScript section and in the Global field paste the Content Blocker code you previously copied to the clipboard in Script Blocker. Set the Execute Global code first option to ON.

Also add the following code under Initialization:

var mapElement = jQuery(el).closest('.shortcode-map');
var mapId = mapElement[0].id;
window['fusion_run_map_' + mapId]();
mapElement.css('display','block');

Last but not least, to enable the optimal display of the Google Map in Avada, add the following code under CSS (please remove the existing one in advance):

.BorlabsCookie ._brlbs-google-maps a._brlbs-btn {
    background: #4285f4;
    border-radius: 3px;
}
.BorlabsCookie ._brlbs-google-maps a._brlbs-btn:hover {
    background: #fff;
    color: #4285f4;
}
.shortcode-map {
    display: none;
}

After that click the Save All Settings button.

Step 3 - Extend page with Content Blocker shortcode

Now go to the page where you embedded the Google Map and add the shortcode from the previously created Content Blocker below the form.

Use a "Code Block" element in the Avada builder for this.

And that's how it should look to you in the end.