Google Maps Hide Controls On Small Screens

I want to hide Google Maps controls on small screens. By default Google Maps hides them at 320px width i think, but i need them to hide on bigger width, around 400px. Here is one w

Solution 1:

Simply hide it with media queries when the screen gets too small ;).

@media screen and (max-width: 400px) {
    .gm-style-mtc {
        display:none;
    }   

}

Solution 2:

You can use Javascript window.matchMedia() method to match your media-query:

if(window.matchMedia("(your-media-query)").matches){
  mapOptions.mapTypeControl = falsedisableDefaultUI: truedelete mapOptions.mapTypeControlOptions;
}

More infos here: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia