The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Greyscale Google Maps in the Divi Map Module

The Divi Theme comes with a map module that makes it easy to embed Google Maps into your webpages. Here's a quick cross-browser CSS snippet for displaying the map in greyscale rather than the standard Google Map colors:

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

8 Comments

  1. Joseph

    My map on the website is not working. This issue was started from last week and I tried adding a new PIN and it worked till last week. When I check it today, it again stopped. Any help would be highly appreciated.

    Reply
    • dan

      Sorry to hear that Joseph. Are you able to give me a link to the page with your map (or explain to me where it should appear)? I can't see it on the site linked in your comment, but I'm not sure if this is where I need to be looking… Also, when you say it's not working, do you mean it doesn't show up at all, or that it is displaying incorrectly in some way? Cheers!

      Reply
  2. Mauro

    hi , Markup in CSS not allowed …

    Reply
    • Mauro

      .et_pb_map_container {

      filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(100%);
      }

      with just this it works

      Reply
      • dan

        Hi Mauro, it's not actually HTML markup. Instead, it's an inline definition of an SVG overlay, which is used to perform the grayscale operation on IE 10. If you don't care about IE 10 support, it can be omitted as per your version which will work on pretty much every other browser out there. Thanks!

        Reply
  3. Michael

    Where should this be pasted?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

The Divi Theme comes with a map module that makes it easy to embed Google Maps into your webpages. Here's a quick cross-browser CSS snippet for displaying the map in greyscale rather than the standard Google Map colors: