[GoogleMap] Control options for google.maps.Map

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.566554, lng: 126.978546},
          zoom: 12
        });
      }
</script>

위와 같이 구글에서 제공되는 샘플을 그대로 실행해 보면 아래 이미지처럼 잘 맵이 나오긴 하는데

만들려고 하는 우리동네 교통사고 다발지역 서비스에서는 위성맵도 지형맵도 명시적인 확대/축소 버튼도

기본으로 제공되는 저런 기능들이 사실 다 필요가 없다.

 

 

이렇게 구글맵 생성시 기본으로 제공되는 기능들을 disable 시키고 싶은데 간단한 방법으로 해당 기능들을 제어할 수 있다.

한번 기본 옵션들을 다 disable 시켜보자.

 

<script>
	var map;
	function initMap() {		  
		var defaultOptions = {
			zoom: 12,
			center: {lat: 37.566554, lng: 126.978546},
			disableDefaultUI:true
		};
		map = new google.maps.Map(document.getElementById('map'), defaultOptions);
	}
</script>

disableDefaultUI 속성을 true로 설정만 하면 아래 이미지처럼 기본으로 보이던 모든 UI옵션들이 깔끔하게 사라진다.

 

 

그런데 갑자기 확대/축소를 하기 위해 +/-  버튼만 필요하면 어떻게 해야 할까?

<script>
	var map;
	function initMap() {		  
		var defaultOptions = {
			zoom: 12,
			center: {lat: 37.566554, lng: 126.978546},
			disableDefaultUI:true,
			zoomControl: true
		};
		map = new google.maps.Map(document.getElementById('map'), defaultOptions);
	}
</script>

간단히 zoomControl 속성만 추가해 주면 된다. 간단한다.

 

관련된 컴포넌트들을 Control이라고 부르는데, 이에 대한 자세한 설명은 여기를 참조.

https://developers.google.com/maps/documentation/javascript/controls

Controls  |  Maps JavaScript API  |  Google Developers