How to Install Google Maps in Compliance with GDPR

Google Maps allows you to display interactive maps directly on your website. With it, users can calculate routes, measure distances, view points of interest, addresses, and much more.

Let’s see how to install GDPR-compliant Google Maps on your website using My Agile Privacy.

Throughout this guide, references are made to style sheets, IDs, and JavaScript functions. Remember: always customize the code to adapt to your website—this may include changing the ID, function names, or CSS styles as needed.

Note: Some themes or plugins may already use a cookieless version of the Google Maps API. If the external code loads from "maps.googleapis.com" (rather than "maps.google.com" or "maps-api-ssl.google.com"), it is already operating without cookies. You may still choose to use a preemptive block if your theme or plugin allows this, or simply enable the "Google Maps Widget" cookie in "necessary" mode.

Solution 1 – Automatic Scan

You can use the advanced "Cookie Shield" feature, which automatically detects Google Maps.
Set the Shield to "Learning" mode and browse your site's pages; detected content will be set to privacy-compliant mode.
Alternatively, you can use manual configuration.

Solution 2 – Manual Configuration

Note: This configuration is intended for advanced/custom installations, typically by developers or in custom themes.

Part 1 – Include the Google Script in Consent-Managed Codes

Google Maps requires an external script for proper operation, which looks like this:

The key parameters in the script are:

• key: your unique API Key for Google Maps.
• callback: the function called once the script loads successfully. In this example, it’s called initMap. You will need to provide this function for proper map initialization.

We’ll cover how to write the callback function below; for now, proceed with adding the Google script.

Part 2 – Adding the Google Maps Cookie in My Agile Privacy

In your WordPress admin area, go to My Agile Privacy → Cookie List in the left menu.
Here, you'll find all cookies imported during plugin installation. By default, they will be in draft status—publish only those relevant to your site.

This screen provides columns like:

• Cookie Name: Name of the cookie.
• Is Necessary: Indicates if the cookie is essential for site functionality. If rejecting it makes the site unusable, it is marked as essential (this is pre-filled).
• Auto Update: Shows whether the reference text is kept up to date automatically for GDPR compliance.
• Installation Type: The method in which the cookie is included. This can be changed as needed; see the guides for more info.

To add Google Maps support, locate "Google Maps (Google Inc.)" in the list and click on it.
The detail page will show pre-filled information and two blank fields for code input.
With "Allow Automatic Update" enabled, this information will be kept up to date automatically.
Below, select "Type of Installation" (Javascript and Noscript, or Raw). Choose "Raw Code" to view the "raw html code" field.

Part 3 – Inserting the Google Maps Code

Paste the Google Maps script code into the "Html Raw Code" field as is.
This is how it should look:

Remember to save and publish the cookie by clicking the blue "Publish" button in the upper right corner.

Part 4 – The Callback Function

The script references a callback function (for example, initMap). Add this function in your JavaScript file or in the footer of your template. Here’s an example:

// Map initialization function
function initMap() {
  // Center point coordinates
  const marker_ltn_lng = { lat: -25.344, lng: 131.036 };
  // Center the map on the coordinates
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: marker_ltn_lng,
  });
  // Place a marker at the coordinates
  const marker = new google.maps.Marker({
    position: marker_ltn_lng,
    map: map,
  });
}

This function sets the map’s coordinates and renders it inside a div with the ID map. Adjust the values as necessary for your implementation.

Part 5 – Add the Map Container in HTML

Insert a <div id="map"></div> where you want the map displayed on your page.

Important: The div will be empty unless styled with CSS. For visibility, use this CSS or adapt it to your site’s needs:

#map {
  height: 400px;    /* Map height */
  width: 100%;      /* Full-width */
}

Final Step – Verifying Operation

Once you've completed these steps, check whether Google Maps displays correctly.
When visiting the page, the map will only load after you have explicitly consented to cookie installation—either by clicking “I agree” on the cookie bar or by activating the cookie under "Customize" in the cookie panel.