CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Dreadlord
Dreadlord

Reputation: 413

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 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.

Upvotes: 0

Views: 1659

Answers (2)

t3__rry
t3__rry

Reputation: 2849

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

Upvotes: 1

roberrrt-s
roberrrt-s

Reputation: 8210

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

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

}

Upvotes: 0

Related Questions