{"id":9072,"date":"2021-12-13T15:28:21","date_gmt":"2021-12-13T14:28:21","guid":{"rendered":"https:\/\/www.myagileprivacy.com\/how-to-install-google-maps-in-compliance-with-gdpr\/"},"modified":"2026-01-02T15:09:09","modified_gmt":"2026-01-02T14:09:09","slug":"how-to-install-google-maps-in-compliance-with-gdpr","status":"publish","type":"post","link":"https:\/\/www.myagileprivacy.com\/en\/how-to-install-google-maps-in-compliance-with-gdpr\/","title":{"rendered":"How to Install Google Maps in Compliance with GDPR"},"content":{"rendered":"

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.<\/p>\n

Let\u2019s see how to install GDPR-compliant Google Maps on your website<\/strong> using My Agile Privacy\u00ae<\/sup>.<\/p>\n

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

Note:<\/strong> 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.<\/p>\n

Solution 1 \u2013 Automatic Scan<\/h2>\n

You can use the advanced \"Cookie Shield\" feature, which automatically detects Google Maps.
\nSet the Shield to \"Learning\" mode and browse your site's pages; detected content will be set to privacy-compliant mode.
\nAlternatively, you can use manual configuration.<\/p>\n

Solution 2 \u2013 Manual Configuration<\/h2>\n

Note: This configuration is intended for advanced\/custom installations, typically by developers or in custom themes.<\/em><\/p>\n

Part 1 \u2013 Include the Google Script in Consent-Managed Codes<\/h3>\n

Google Maps requires an external script for proper operation, which looks like this:
\n\"Google
\nThe key parameters in the script are:<\/p>\n

    \n
  • key<\/em>: your unique API Key for Google Maps.<\/li>\n
  • callback<\/em>: the function called once the script loads successfully. In this example, it\u2019s called initMap<\/code>. You will need to provide this function for proper map initialization.<\/li>\n<\/ul>\n

    We\u2019ll cover how to write the callback function below; for now, proceed with adding the Google script.<\/p>\n

    Part 2 \u2013 Adding the Google Maps Cookie in My Agile Privacy\u00ae<\/sup><\/h3>\n

    In your WordPress admin area, go to My Agile Privacy\u00ae<\/sup> \u2192 Cookie List<\/em> in the left menu.
    \nHere, you'll find all cookies imported during plugin installation. By default, they will be in draft status\u2014publish only those relevant to your site.
    \n\"cookie
    \nThis screen provides columns like:<\/p>\n

      \n
    • Cookie Name<\/em>: Name of the cookie.<\/li>\n
    • Is Necessary<\/em>: 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).<\/li>\n
    • Auto Update<\/em>: Shows whether the reference text is kept up to date automatically for GDPR compliance.<\/li>\n
    • Installation Type<\/em>: The method in which the cookie is included. This can be changed as needed; see the guides for more info.<\/li>\n<\/ul>\n

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

      Part 3 \u2013 Inserting the Google Maps Code<\/h3>\n

      Paste the Google Maps script code into the \"Html Raw Code\" field as is.
      \nThis is how it should look:
      \n\"raw
      \nRemember to save and publish the cookie by clicking the blue \"Publish\" button in the upper right corner.<\/p>\n

      Part 4 \u2013 The Callback Function<\/h3>\n

      The script references a callback function (for example, initMap<\/code>). Add this function in your JavaScript file or in the footer of your template. Here\u2019s an example:<\/p>\n

      \n\/\/ Map initialization function\nfunction initMap() {\n  \/\/ Center point coordinates\n  const marker_ltn_lng = { lat: -25.344, lng: 131.036 };\n  \/\/ Center the map on the coordinates\n  const map = new google.maps.Map(document.getElementById("map"), {\n    zoom: 4,\n    center: marker_ltn_lng,\n  });\n  \/\/ Place a marker at the coordinates\n  const marker = new google.maps.Marker({\n    position: marker_ltn_lng,\n    map: map,\n  });\n}\n<\/code><\/pre>\n
      This function sets the map\u2019s coordinates and renders it inside a div<\/code> with the ID map<\/code>. Adjust the values as necessary for your implementation.<\/p>\n
      Part 5 \u2013 Add the Map Container in HTML<\/h3>\n
      Insert a <div id="map"><\/div><\/code> where you want the map displayed on your page.
      \n\"map
      \nImportant:<\/strong> The div<\/code> will be empty unless styled with CSS. For visibility, use this CSS or adapt it to your site\u2019s needs:<\/p>\n
      \n#map {\n  height: 400px;    \/* Map height *\/\n  width: 100%;      \/* Full-width *\/\n}\n<\/code><\/pre>\n
      Final Step \u2013 Verifying Operation<\/h2>\n
      Once you've completed these steps, check whether Google Maps displays correctly.
      \nWhen visiting the page, the map will only load after you have explicitly consented to cookie installation\u2014either by clicking \u201cI agree\u201d on the cookie bar or by activating the cookie under \"Customize\" in the cookie panel.<\/p>\n","protected":false},"excerpt":{"rendered":"
      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\u2019s see how to install GDPR-compliant Google Maps on your website using My Agile Privacy\u00ae. Throughout this guide, references are made to style sheets, IDs, and JavaScript […]<\/p>\n","protected":false},"author":1,"featured_media":8718,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[33],"tags":[35],"class_list":["post-9072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cookies","tag-free"],"acf":{"visibilita_box_autore":false,"autore_associato":null,"elenco_faq_articolo":null,"url_esterno":"","titolo":"Google Maps"},"_links":{"self":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/posts\/9072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/comments?post=9072"}],"version-history":[{"count":11,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/posts\/9072\/revisions"}],"predecessor-version":[{"id":15164,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/posts\/9072\/revisions\/15164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/media\/8718"}],"wp:attachment":[{"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/media?parent=9072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/categories?post=9072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.myagileprivacy.com\/en\/wp-json\/wp\/v2\/tags?post=9072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}