Indicating that your website uses Google Maps during the Complianz Wizard (Wizard > Consent > Services) will, in many cases, be sufficient to block the Map prior to consent.
If that is not the case: use this article to check if Complianz contains an out-of-the-box integration with the Google Maps plugin/script used on your WordPress site, or if it concerns a custom script which may need some customizing to work correctly.
Blocking Google Maps works out-of-the-box with themes and plugins from the below list:
-
- Google Maps Easy
- WP Go Maps (formerly WP Google Maps)
- WP Google Maps Widget
- Novo Map
- Flexible Map
- Avada (Embed API)
- Divi Google Maps
- MapPress
- Meks Easy Maps
- GeneratePress Google Maps
- WeLaunch Store Locator
- WP Store Locator
- ColibriWP Theme
- Uncode Theme
- WPAdverts (Maps and Locations Add-on)
In addition to the above list: some Google Maps integrations are not shipped with Complianz by default, as these may require some additional tweaking.
Such integrations can be found in the list below, and can be implemented as MU Plugins.
- 10web.io Google Maps
- Bricks Builder Google Maps
- Enfold Theme Google Maps
- ChurchThemes Google Maps
- BeTheme Google Maps
- Interico Theme Google Maps
- Directory Theme Google Maps
- FacetWP Google Maps
- PropertyHive Google Maps
- WoodMart Theme Google Maps
- Flippercode WP Maps Pro
Not in one of the above lists? You may need to do some custom work.
Experiencing an issue? Let’s debug the problem!
You might run into an issue when integrating your Google Map in Complianz’ Script Center. The below troubleshooting steps should help you find the cause of the issue.
In case you use a custom script or MU Plugin to integrate your Google Map, instead of the Script Center, please see our step-by-step guide on custom integrations (includes code examples): https://complianz.io/custom-google-maps-implementation/
Disable caching and optimization tools
Often an integration seems not to work, while the actual problem is caching or concatenation. To ensure that we’re not chasing ghosts, please disable these to start with. You can enable them again later, in some cases with some exclusions.
Ensure that all scripts are blocked
Do you see an error in the browser console when loading your Google Map, such as ‘google is not defined’? Then you have a piece of JavaScript that is not blocked yet.
The Map is dependent on blocked code, and fails as a result. To check which script needs to be blocked, you can look in your browser Console, and check on which line the error occurs. If it’s an inline script (usually), copy a unique string found within the <script> tags where the error occurs. If it’s an included JavaScript file, copy the name of the file.
Under Complianz > Integrations > Script Center, create a new element in the category “Block a script, iframe or plugin”. Give it an easily recognizable name, like “Custom Google Maps”.
- Under “URL’s that should be blocked”, paste the string you just copied. If there are more URL or scripts, you can add these by clicking the ‘+’ icon.
- Leave “Enable placeholder” activated.
- In these cases, your Google Maps is usually not an iFrame, so uncheck “The blocked content is an iFrame”.
- In the “div class or ID” field, enter a classname or id of the div element where you want the placeholder to appear.
This should be a <div> that wraps the actual Google Maps content. The below example illustrates how we found the <div> class “gmp_MapPreview”.
Save this, and verify the results on the front-end.
Check for dependency issues
If you still see a console error, it is possible that one script is loaded faster than the other, causing a ‘race condition’. You can tell Complianz which script to load first, by clicking “enable dependency”. If you enable it, you get a list of scripts that are also blocked. You can select one.
Often, your custom script will have to wait until the core script, for example until “maps.googleapis.com” has loaded.
In that case, in the previous step, also add maps.googleapis.com to the blocked URL list. Then save. Reload the page to ensure you have all options appearing in the dropdown menu. If you also blocked myCustomScript, you can now set: myCustomScript waits for maps.googleapis.com. This means that myCustomScript will not load until maps.googleapis.com has loaded.
The below screenshot demonstrates an integration where “core.gmap.js” waits for “maps.googleapis.com” to load, and “frontend.gmap.js” waits for “core.gmap.js”.
No console errors, but the Map still doesn’t load
What if the Map still does not load after providing consent, but doesn’t throw any JavaScript errors in the console either?
ACF (Advanced Custom Fields)
Are you using ACF? Complianz includes an ACF integration that blocks the Google Maps example code provided by ACF.
If you have a different Google Maps implementation, try disabling the ACF integration found under Complianz > Integrations > Plugins.
Scripts that trigger on document.read or document.load
Some custom scripts (like the ACF example), load on document.ready, or document.load. The result is that if a user clicks consent, the map script doesn’t get executed, because the ‘document.ready’ event already has executed, long before the user clicked ‘Accept’.
To fix this we can tell Complianz to force a document.ready event. This requires the use of a custom script, which we recommend placing inside an MU Plugin:
