Debugging Google Maps integrations

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.

Indicating that your website uses during the Complianz Wizard (Wizard > Consent > Services) will, in most 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.

Out-of-the-box supported Google Maps plugins are:

    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 Maps (Embed API)
    7. MapPress
    8. Meks Easy Maps 
    9. GeneratePress Maps

In addition to the above list: some Google Maps integrations are not shipped with Complianz by default, as they 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. ChurchThemes Google Maps
  4. BeTheme Google Maps
  5. Interico Theme Google Maps
  6. Directory Theme Google Maps
  7. FacetWP Google Maps
  8. PropertyHive Google Maps
  9. WoodMart Theme Google Maps
  10. 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/

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:

 

Recent articles

Integration with Woodmart Google Maps

An integration with the WoodMart theme is available as an MU Plugin on GitHub: https://github.com/Really-Simple-Plugins/complianz-integrations/blob/master/woodmart-custom-google-maps.php

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

Categories

Popular articles

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