Sometimes the colorful google map will kill your website design, and you want it to show in grayscale and change to colorful when you hover on it.

First go to map.google.com and get the embed code:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d787.9876569385103!2d144.9699581971051!3d-37.81462541777397!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642c821f25843%3A0xd889fb73b0f721c1!2sLevel%2015%2F111%20Collins%20St%2C%20Melbourne%20VIC%203000!5e0!3m2!1sen!2sau!4v1601257653348!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

 

put this in your website HTML code.

Wrap it with div:

<div style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" class="google_map"> 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d787.9876569385103!2d144.9699581971051!3d-37.81462541777397!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642c821f25843%3A0xd889fb73b0f721c1!2sLevel%2015%2F111%20Collins%20St%2C%20Melbourne%20VIC%203000!5e0!3m2!1sen!2sau!4v1601257653348!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

</div>

Note that we give it a class “google_map”, in your CSS add the below lines:

/*Google map*/
div.google_map:hover{
-webkit-filter: grayscale(20%) !important; 
filter: grayscale(20%) !important;
transition-delay:300ms !important;
transition-duration:400ms !important;
}

Note that I don’t want it to be 100% colorful, so I still kept 20% grayscale . Now the google map will show in black and white by default and transit into colorful when a user hovers on it.