Debugging Google Maps integrations

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:

    1. Google Maps Easy
    2. WP Go Maps (formerly WP Google Maps)
    3. WP Google Maps Widget
    4. Novo Map
    5. Flexible Map
    6. Avada (Embed API)
    7. Divi Google Maps
    8. MapPress
    9. Meks Easy Maps 
    10. GeneratePress Google Maps
    11. WeLaunch Store Locator
    12. WP Store Locator
    13. ColibriWP Theme
    14. Uncode Theme
    15. 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.

  1. 10web.io Google Maps
  2. Bricks Builder Google Maps
  3. Enfold Theme Google Maps
  4. ChurchThemes Google Maps
  5. BeTheme Google Maps
  6. Interico Theme Google Maps
  7. Directory Theme Google Maps
  8. FacetWP Google Maps
  9. PropertyHive Google Maps
  10. WoodMart Theme Google Maps
  11. 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.

Google Maps - Not all Map scripts blocked

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”. Script Center - Enable Placeholder
  • In the “div class or ID” field, enter a classname or id of the div element where you want the placeholder to appear.

Script Center - Enter Div Class or ID for Placeholder

This should be a <div> that wraps the actual Google Maps content. The below example illustrates how we found the <div> class “gmp_MapPreview”.

Script Center - Finding the div class or ID to add the placeholder

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”.

Google Maps - Adding dependencies

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:

 

Join 1M+ users and install The Privacy Suite for WordPress locally, automated or fully customized, and access our awesome support if you need any help!

Complianz has received its Google CMP Certification to conform to requirements for publishers using Google advertising products.