The Privacy Suite for WordPress

Custom Google Maps Implementation

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

Not all implementations are the same; there are Google Maps plugins, Themes that include Google Maps blocks, different Page Builders, and manual implementations. Complianz will enable an integration with the needed adjustments to block Google Maps and set a placeholder for the most popular implementation. However, if this is not the case for your specific implementation, you can try the below solution. Some debugging and custom coding is required.

Common issue

NB. It is very likely you don’t have any issues with your current implementation, you can follow the same advice to block, unblock and set a placeholder.

A common issue is a console error that signifies a dependency issue. This issue can affect the blocking of the script and/or the loading of the script after consent. This example will feature the latter, a script is not released correctly and will cause an error with Google Maps:

It throws the error: Google is not defined

This error means a file is looking for the Google Maps API, but this API call is blocked by Complianz. This file is however dependent on the API being present. This dependency error will cause Google Maps not to work properly.

Creating your own Integration

To fix the issue with dependencies and enable your own Google Maps integration, we will need to do the following:

  1. Fix the error after consent by blocking the file
  2. Make sure the files are loaded correctly after consent
  3. Set a placeholder for your Google Maps container

Below you will find the full MU plugin you can use for your own efforts, we will show snippets to explain its purpose.

1. Fix the error after consent by blocking the file

In this example, we found an inline jQuery scrip with a function called “mapOptions” that causes the issue. We add this function to our blocklist. To find the culprit, have a look at the page source of the page where your Google Maps is located and look for an inline script that might be responsible for throwing an error if Google is not available. For example, scripts that might add an overlay with infoBoxes, or markers.

2. Make sure the files are loaded correctly after consent

We know “mapOptions” causes an error because it needs the Google API to be loaded. To fix this, we will add a dependency. We will tell with the below script that “mapOptions” should wait for the Google API.

3. Set a placeholder for your Google Maps container

Now we need a placeholder. For this, you will need to select a class where we can set our placeholder. To do this you have 2 options;

  1. Select the current CSS class of the Google Maps container.
  2. Add your own CSS class to your Google Maps container.

For 1, check your Google Maps container by doing a right-click on the element and check for the CSS class, for example:

To add a placeholder we use this script:

Example MU plugin

To install a MU plugin, read this article. If you need any help during this process, please let us know.

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

LGPD Brazil and WordPress

The “Marco Civil” and the Brazilian General Data Protection Law (LGPD) In Complianz 5.4 we will add full support for the Civil Rights Framework for

Read More

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!