모바일 웹에서 페이지를 스크롤 하려다가 의도치 않게 지도가 움직여버리는 경우가 있지 않으셨나요? 이런 문제를 해결하기 위해 Google Maps JavaScript Maps API에 개발자분들이 터치기기의 제스쳐를 제어할 수 있는 옵션이 추가되었습니다.

터치 기기의 Javascript API의 제스쳐 핸들링의 변경 사항을 소개합니다. 이 기능이 기본 설정으로 변경되기 전에 꼭 한번 테스트 해보시기를 강력히 추천합니다. 또한 모바일 기기에서 전체화면 버튼에도 변화를 주어 맵이 확대됐을 때 더 나은 컨트롤을 할 수 있도록 변경됐습니다.

gestureHandling

맵이 제스쳐를 어떻게 처리해야 하는지에 대한 새로운 옵션은 string 타입이고 gestureHandling이라고 불립니다. 이 옵션에는 아래 값들을 할당할 수 있습니다.

1. cooperative: 마우스 제스쳐처럼 두 손가락으로 지도를 pan 하거나 zoom 할 수 있습니다. 한 손가락 터치는 지도로는 지도가 핸들링 되지 않습니다. 이 모드에서는, 맵이 페이지와 협력하여, 
   한 손가락 터치로 페이지를 스크롤할 수 있습니다.
2. greedy: (기존 제스쳐 핸들링과 동일) 모든 터치로 지도를 pan이나 zoom 할 수 있습니다.
3. none: 지도가 사용자에 의해 pan이나 zoom 될 수 없습니다.
4. auto: (기본값) 페이지가 스크롤 되는지 안되는지에 따라 제스쳐 핸들링이 자동적으로 cooperative나 greedy로 설정됩니다. 
   • 만약 페이지가 스크롤 가능하면, 사용자가 페이지를 스크롤하고 싶은 확률이 높기 때문에 제스쳐 핸들링 모드는 자동으로 cooperative가 됩니다.
   • 만약 페이지가 스크롤 불가능하면, 어떤 동작이든 지도를 제어할 의도일 것이기 때문에 제스쳐 핸들링 모드는 자동으로 greedy가 됩니다.

만약 지도가 iFrame 안에 있다면, 제스쳐 핸들링은 지금과 같이 자동으로 greedy로 설정됩니다. 지도가 iFrame 안에 있기 때문에 API는 스크롤이 가능한 페이지인지 아닌지 판별할 수 없기 때문입니다.

위 네개의 제스쳐 핸들링은 MapOptions 객체의 해당 필드에 추가함으로써 enable시킬 수 있습니다.

소스 예제: https://developers.google.com/maps/documentation/javascript/interaction

전체화면 컨트롤

모바일 기기에서의 새로운 제스쳐 핸들링을 위한 전체화면 버튼도 등장했습니다. 지도가 전체화면 모드일 때, 사용자는 한 손가락을 이용하여 지도를 패닝할 수 있습니다. 전체화면 기능은 현재 지원하는 기기에서 
기본값으로 사용 가능합니다. 이 기능은 더 나은 컨트롤을 위해 지도를 확대시키고 사용자들이 지도와의 중요한 상호작용이 필요할 때 한 손가락으로 스크롤하는 모드로 변경할 수 있도록 허용합니다.

테스트 해보기

이 새로운 기능들이 여러분의 앱에 어떻게 영향을 미칠 것인지 테스트해보실 수 있습니다. JavaScript API 로딩시 버전을 3.exp으로 설정하면 Maps JavaScript API experimental version에서 사용해보실 수 있습니다:

<script async defer src="https://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID&v=3.exp&callback=initMap"></script>

참고: 아직 API 실험 버전을 실 서비스 환경에는 아직 적용하지 않도록 해주시기 바랍니다. 이 버전은 테스트 목적으로만 사용되어야 합니다.

이용하지 않기

gestureHandling 옵션을 greedy로 하고 fullscreenControl을 true나 false로 변경함으로써 언제든지 모바일과 데스크탑 브라우저에서 지도의 동작을 이전과 같도록 다시 변경하실 수 있습니다.

 

이번 업데이트로 모바일기기 사용자들의 편의성이 크게 개선될 것으로 보입니다. 테스트는 꼭, 적용은 아직! 부탁드리고 궁금한 점이 있으시면 help@sphinfo.co.kr 로 언제든지 문의해주시기 바랍니다.

 

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다