Googleマップは小さな画面でコントロールを非表示にします

Question

小さな画面でGoogle Mapsコントロールを非表示にしたいと思います。デフォルトでは、Googleマップでは320pxの幅で表示されていますが、400px程度の大きな幅で非表示にする必要があります。 Here is one working exampleしかし、私は別のコードを使用しているので、それは動作していない、私はちょうど構文エラーを取得します。ここに私のコードは次のとおりです。

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マップコードで動作しますが、私の...

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

でどのように私に見せて下さいませんこれらの2つのコードを組み合わせて動作させます。私は自分で何かをやってみましたが、構文エラーが出ています。

Answer 1

は、単にメディアクエリでそれを隠す画面が小さすぎるなったとき;）。

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

} 

Answer 2

あなたはメディアクエリを一致させるためにはJavaScript window.matchMedia()メソッドを使用することができます：ここ

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

もっとに関する情報：https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia