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:
1 .et_pb_map_container { 2 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"); 3 filter: grayscale(100%); 4 -moz-filter: grayscale(100%); 5 -ms-filter: grayscale(100%); 6 -o-filter: grayscale(100%); 7 filter: gray; /* IE6-9 */ 8 -webkit-filter: grayscale(100%); 9 }
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.
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!
hi , Markup in CSS not allowed …
.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
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!
Where should this be pasted?
Hi Michael. As it is CSS code, there are a few options, as explained in this post: https://divibooster.com/adding-css-to-the-divi-theme/
Thank you!