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:
- Fix the error after consent by blocking the file
- Make sure the files are loaded correctly after consent
- 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;
- Select the current CSS class of the Google Maps container.
- 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.