MapOptions 객체에서 gestureHandling 옵션을 사용하면 모바일 기기에서 볼 때 지도의 패닝 및 스크롤 동작을 제어할 수 있습니다.
예
다음 예시는 cooperative 제스처 처리를 사용합니다. 모바일 기기에서 데모를 보고 실제로 작동하는 코드를 확인하세요.
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Cooperative Gesture Handling</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
/**
* This sample sets the gesture handling mode to 'cooperative',
* which means that on a mobile device, the user must swipe with one
* finger to scroll the page and two fingers to pan the map.
*/
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
gestureHandling: 'cooperative'
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
제스처 처리
모바일 웹에서 사용자가 페이지를 스크롤하려고 스와이프하는 것은 성가신 일이 될 수 있지만 지도가 대신 패닝합니다.
Google Maps JavaScript API는 지도와 상호작용할 때 사용자의 경험을 최적화하는 데 사용할 수 있는 MapOptions 객체의 gestureHandling 옵션을 제공합니다. 사용할 수 있는 값은 다음과 같습니다.
greedy: 사용자가 화면을 스와이프하면(드래그하면) 지도는 항상 (위 또는 아래, 왼쪽 또는 오른쪽으로) 패닝합니다. 즉, 한 손가락으로 스와이프 및 두 손가락으로 스와이프 모두 지도를 패닝합니다.cooperative: 사용자가 한 손가락으로 스와이프하여 페이지를 스크롤하고 두 손가락으로 스와이프하여 지도를 패닝해야 합니다. 사용자가 한 손가락으로 지도를 스와이프하면 두 손가락을 사용하여 지도를 이동하라는 메시지가 표시되고 지도에 오버레이가 표시됩니다. 모바일 기기에서 위의 샘플을 보고 실제로 작동하는 cooperative 모드 확인하세요.none: 지도를 패닝하거나 손가락으로 확대/축소할 수 없습니다.auto(기본값): 페이지의 스크롤 가능 여부에 따라cooperative또는greedy동작이 실행됩니다. 자세히 설명하자면,auto옵션에서 API가 다음 동작을 선택합니다.cooperative: 페이지 본문이 창보다 크거나 API가 페이지 크기를 결정할 수 없는 경우(예: iframe에 있는 경우)greedy: 페이지 본문이 창보다 크지 않아서 사용자가 스크롤할 필요가 없는 경우
모바일 기기에서는 전체 화면 컨트롤이 기본적으로 표시되므로 사용자가 지도를 쉽게 확대할 수 있습니다. 지도가 전체 화면 모드일 때 사용자는 한 손가락이나 두 손가락을 사용하여 지도를 패닝할 수 있습니다. 참고: iOS는 전체 화면 기능을 지원하지 않습니다. 따라서 전체 화면 컨트롤은 iOS 기기에서 보이지 않습니다.
이벤트
API는 사용자가 지도를 스크롤(드래그)할 때 다음 이벤트를 발생시킵니다.
drag: 사용자가 지도를 드래그하는 동안 반복적으로 발생합니다.dragstart: 사용자가 지도 드래그를 시작할 때 발생합니다.dragend: 사용자가 지도 드래그를 중지할 때 발생합니다.
제한
gestureHandling 옵션에서 사용할 수 있는 동작에는 다음 제한이 적용됩니다.
- 터치 인식 기기에만 적용: 사용자가 터치 인터페이스를 지원하는 기기에서 페이지를 보는 경우에만
gestureHandling옵션이 적용됩니다. - 터치 이벤트에만 적용: 마우스 또는 펜 이벤트에는
gestureHandling옵션이 적용되지 않습니다. - 로그인한 지도에는 적용 안 됨: 로그인이 활성화된 지도에는
gestureHandling옵션이 적용되지 않습니다. - 스트리트 뷰에는 적용 안 됨: 스트리트 뷰 서비스에는
gestureHandling옵션이 적용되지 않습니다.
도움이 필요하시나요? 지원 페이지