Google地图在小屏幕上隐藏控件 [英] Google Maps hide controls on small screens

问题描述

我想在小屏幕上隐藏Google地图控件。默认情况下，Google地图会隐藏它们，宽度为320px，但我需要它们隐藏在更大的宽度上，大约400px。 这是一个工作示例，但我正在使用不同的代码，所以它不工作，我只是得到语法错误。这里是我的代码：

  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 
} 
 }）; 
  

这是可以捕捉宽度并禁用控件的代码，它适用于大多数Google地图代码，但不适用与我的...

$ $ p $ $ $ c $ $窗口.width（）
var width = window.innerWidth;
if（width <400）{
mapOptions.mapTypeControl = false;
mapTypeControl：false
disableDefaultUI：true
删除mapOptions.mapTypeControlOptions;
}

请告诉我如何结合这两个代码以便他们工作，我试着做我自己的东西，但我只是得到语法错误。

解决方案

当屏幕太小时，只需使用媒体查询隐藏它; ）。

  @media screen and（max-width：400px）{
 .gm-style-mtc {
 display：none; 
} 
 
} 
  

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.

解决方案

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

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

}

这篇关于Google地图在小屏幕上隐藏控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！