구글맵 api 연동 MapOptions 인터페이스

구글맵 연동할 일이 있어 작업하다가 지도에 불필요한 부분들을 안 보이게 해야 되어서 찾아본 내용 중에 몇 가지 옵션 공유합니다.

const map = new google.maps.Map(document.getElementById("google_map"), {
  center: { lat: 37.55068, lng: 126.9962 },
  zoom: 17,
  minZoom: 17,
  gestureHandling: 'greedy',
  clickableIcons: false,
  mapTypeControl: false
});

center : 초기 지도 중심 좌표입니다.
zoom : 초기 지도 확대/축소 값입니다.

여기까지는 기본 옵션이고 아래는 작업하면서 필요한 부분들 추가한 내용입니다.

minZoom : 지도 최소 축소값입니다. 주소 검색 후 지도 이동하면서 지도가 축소 안되게 하려고 추가했습니다.

gestureHandling : 지도 확대 축소 방법입니다. Ctrl키를 누른 상태에서 확대/축소가 되길래 찾아본 옵션입니다.- cooperative : 두 손가락 터치로 동작합니다. Ctrl키를 누른 상태에서 확대/축소가 가능합니다.
- greedy : 모든 터치 동작 및 스크롤 이벤트가 확대, 축소, 이동이 가능합니다.
- none : 확대, 축소, 이동 불가
- auto : 기본값으로 페이지 스크롤 여부 등에 따라 지정됩니다.

clickableIcons : 지도에 표시된 아이콘 클릭 가능 여부입니다. 마우스로 찍은 지도의 주소를 입력창에 불러와야 되는데 지도에 표시된 아이콘 클릭 시 해당 주소가 안 불러와져 false로 처리했습니다.

mapTypeControl : 지도 유형 선택하는 버튼 출력 여부입니다. 이 버튼 부분에 입력창을 보이게 해야 되어 false로 처리했습니다.

더 많은 구글맵옵션은 다음 링크에서 확인 부탁드립니다.

 

https://developers.google.com/maps/documentation/javascript/reference/map?hl=ko&_gl=1*d9u77m*_up*MQ..*_ga*Nzc1MzE0OTQuMTcxNzc0MDU4NQ..*_ga_NRWSTWS78N*MTcxNzc0MDU4NS4xLjAuMTcxNzc0MDU4NS4wLjAuMA..#MapOptions

Maps JavaScript API  |  Google for Developers

 

오늘도 방문해 주셔서 감사드립니다.