모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

스크롤 및 패닝 동작

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 옵션이 적용되지 않습니다.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.