2016-09-22 5 views
0

작은 화면에서 Google지도 컨트롤을 숨기고 싶습니다. 기본적으로 Google지도는 320px 너비로 숨 깁니다. 그러나 너비가 400px 인 큰 너비로 숨길 필요가 있습니다. Here is one working example,하지만 작동하지 않는 다른 코드를 사용하고, 난 그냥 구문 오류가 나타납니다. 이것은 폭을 캡처하고 컨트롤을 비활성화 코드Google지도는 작은 화면에서 컨트롤을 숨 깁니다.

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

, 그리고

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

방법을 보여주세요 ... 내 대부분의 Google지도 코드로 작동하지만,하지 : 여기 내 코드입니다 이 두 코드를 결합하여 작동 시키므로, 독자적으로 뭔가를 시도했지만 구문 오류가 발생했습니다.

+0

CSS 미디어 쿼리를 사용 하시겠습니까? – Roberrrt

+1

네가 맞다. 가장 간단한 해결책이다. 아래로 내려 가서 gm-style-mtc 클래스를 찾은 다음 미디어 쿼리에 display : none을 입력합니다. 질문에 대한 제안, 제발 최선을 선택하실 수 있습니다 답변을 작성하십시오. – Dreadlord

답변

1

단순히 미디어 쿼리와 함께 그것을 숨길 화면이 너무 작은 얻을 때).

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

} 
0

당신은 미디어 쿼리와 일치하는 자바 스크립트 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

관련 문제