Hide Google Maps controls on small screens (mobiles, etc...)

Question

How to hide Map Type option (Map, Satellite...) if the screen si smaller than certain amount of pixels? This is how my Google Maps API V3 code looks like:

var mapOptions = {
          center: new google.maps.LatLng(initLat, initLong),
          zoom: level,
          scaleControl: true,
          mapTypeControl: true,
          mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
              position: google.maps.ControlPosition.RIGHT_TOP
          },
          zoomControl: true,
          zoomControlOptions: {
              position: google.maps.ControlPosition.LEFT_TOP
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

As you can see mapTypeControl is set to true now, and I need it to be set to false if screen width is smaller than lets say 340px;. Also there is mapTypeControlOptions which should be hidden or something if the screen is smaller.

Answer 1

You could check the browser width just after create your mapOptions variable, and if it's smaller than 340px, you can modify it like a regular javascript object.

var width = window.innerWidth;
if(width < 340){
    mapOptions.mapTypeControl = false;
    delete mapOptions.mapTypeControlOptions;
}

The main problem here is the right way to take the browser width. I would consider using $(window).width() jQuery method.

EDIT: I wouldn't recommend using jQuery for this purpose anymore.
Check this answer out for getting the browser width.

Answer 2

In the Google Maps Javascript API all controls are set to disappear by default if the map is smaller than 200x200px. This behaviour can be modified by explicitly setting the control to be visible - however it does not currently seem possible to modify the default size below which controls are hidden. https://developers.google.com/maps/documentation/javascript/controls

As an option, you could use a static Google map for screen width less than 340px which simply links to Google Maps if the user requires full map interaction or controls: https://developers.google.com/maps/documentation/static-maps/