Google Maps iframe in grey & set zoom level

1. Gray Map – Add a class in the iframe. For example:

<iframe class="cu-gmap" width="100%" ......</iframe>

Then in CSS, add these filters:

.cu-gmap {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
}

2. Set Zoom – Set the required zoom level at the big map first, then open the Share window. This way, the iframe html will generate the set zoom level.

Reference :

https://coderwall.com/p/ehis_g/google-maps-iframe-in-black-and-white

https://sww.nz/how-to-adjust-zoom-on-embedded-google-maps-2019/