Custom Google Maps Implementation

Not all Google Maps 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 script 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. With the below additions (the ‘enable_dependency’ and ‘dependency’ properties) to the code that we created during step 1, we state 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 to this class: we adjust the previous code by adding ‘enable_placeholder’ and setting it to ‘1’, as well as adding ‘placeholder_class’ and setting it to the ‘wpb_wrapper’ class.

4. (Optional) Re-trigger the load event

This is not always necessary, but if the Google Maps script initializes on document load or ready, the map won’t be initialized after providing consent as that event had already ran at that point.

If that is the case, you can (re)trigger the load event by adding the below snippet to your integration to re-initialize the Google Map upon providing consent.