0

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 working example, but i am using different code so it is not working, i just get syntax errors. Here is my code:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
     center: {
       lat: 52.00,
       lng: 10.00
     },
     zoom: 4,
      zoomControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
          },
        mapTypeControl: true,
        mapTypeControlOptions: {
              position: google.maps.ControlPosition.TOP_RIGHT
          }
   });

This is code which captures width and disables controls, and it works with most Google Maps codes, but not with my...

$(window).width()       
var width = window.innerWidth;
 if(width < 400){
            mapOptions.mapTypeControl = false;
            mapTypeControl: false
            disableDefaultUI: true
            delete mapOptions.mapTypeControlOptions;
        }

Please show me how to combine these two codes so they work, i tryed doing something on my own, but im just getting syntax errors.

Community
  • 1
  • 1
Dreadlord
  • 403
  • 1
  • 8
  • 30
  • Use CSS mediaqueries? – roberrrt-s Sep 22 '16 at 11:58
  • 1
    Yep you are right, the simplest solution. I diggedd down and found this class gm-style-mtc and just put display:none with media query. Thx for suggestion, please write an answer so i can choose it as the best one. – Dreadlord Sep 22 '16 at 12:46

2 Answers2

1

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

if(window.matchMedia("(your-media-query)").matches){
  mapOptions.mapTypeControl = false
  disableDefaultUI: true
  delete mapOptions.mapTypeControlOptions;
}

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

Gerardo BLANCO
  • 5,590
  • 1
  • 16
  • 35
t3__rry
  • 2,817
  • 2
  • 23
  • 38
0

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

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

}
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
  • **Never** use undocumented map properties and/or classnames. Use the documented map options and methods to hide the controls you don't need. – MrUpsidown May 06 '22 at 12:04