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:

.et_pb_map_container { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}

This post may contain referral links which may earn a commission for this site

Divi Booster

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

8 Comments

  1. 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
    • 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. hi , Markup in CSS not allowed …

    Reply
    • .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
      • 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. Where should this be pasted?

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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