모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

그리기 계층(라이브러리)

  1. 개요
  2. 라이브러리 사용
  3. DrawingManager 옵션
  4. 그리기 도구 컨트롤 업데이트
  5. 그리기 이벤트

개요

DrawingManager 클래스는 사용자가 지도에 폴리곤, 사각형, 폴리라인, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다.

라이브러리 사용

Drawing Tools는 메인 Maps API JavaScript 코드와 별개의, 자체 포함된 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 Maps API 부트스트랩 URL의 libraries 매개변수를 사용하여 로드해야 합니다.

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

libraries 매개변수를 추가한 후에 다음과 같이 DrawingManager 객체를 생성할 수 있습니다.

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

DrawingManager 옵션

DrawingManager 생성자는 표시할 컨트롤 집합, 컨트롤 위치 및 최초 그리기 상태를 정의하는 옵션 집합을 취합니다.

  • DrawingManagerdrawingMode 속성은 DrawingManager의 초기 그리기 상태를 정의합니다. google.maps.drawing.OverlayType 상수를 받아들입니다. 기본값은 null입니다. 이 경우, DrawingManager가 초기화될 때 커서는 비 그리기 모드에 있습니다.
  • DrawingManagerdrawingControl 속성은 지도에 그리기 도구 선택 인터페이스를 표시할지 여부를 정의합니다. 부울 값을 받아들입니다.
  • 또한, DrawingManagerdrawingControlOptions 속성을 사용하여 컨트롤의 위치와 컨트롤에 나타낼 오버레이 유형을 정의할 수도 있습니다.
    • position은 지도에서 그리기 컨트롤의 위치를 정의하고 google.maps.ControlPosition 상수를 받아들입니다.
    • drawingModesgoogle.maps.drawing.OverlayType 상수의 배열이고 그리기 컨트롤 셰이프 선택기에 포함할 오버레이 유형을 정의합니다. 손 모양 아이콘은 항상 존재하므로, 사용자가 그리지 않고 지도와 상호작용할 수 있습니다. 컨트롤에서 도구의 순서는 배열에서 선언된 순서와 일치합니다.
  • 각 유형의 오버레이는 처음 생성될 때 오버레이의 모양을 정의하는 기본 속성 집합이 할당됩니다. 이들은 해당 오버레이의 {overlay}Options 속성에서 정의됩니다. (여기서 {overlay}는 오버레이 유형을 나타냅니다.) 예를 들어, 원의 채우기 속성, 스트로크 속성, zIndex, 클릭 가능성은 circleOptions 속성으로 정의할 수 있습니다. 임의의 크기, 위치 또는 지도 값을 전달하면 무시됩니다. 설정 가능한 속성에 대한 자세한 내용은 API 참조 문서를 참조하세요.

참고: 셰이프를 생성한 후에 사용자가 수정할 수 있게 하려면 editable 속성을 true로 설정합니다.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

예시 보기(drawing-tools.html).

그리기 도구 컨트롤 업데이트

DrawingManager 객체가 생성되면 setOptions()을 호출하고 새 값을 전달하는 방식으로 업데이트할 수 있습니다.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

그리기 도구 컨트롤을 숨기기거나 표시하려면:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

map 객체에서 그리기 도구 컨트롤을 제거하려면:

drawingManager.setMap(null);

그리기 컨트롤을 숨기면, 그리기 도구 컨트롤은 표시되지 않지만 DrawingManager 클래스의 모든 기능은 여전히 이용 가능합니다. 이러한 방식으로 필요한 경우 자신만의 컨트롤을 구현할 수 있습니다. map 객체에서 DrawingManager제거하면 모든 그리기 기능이 비활성화됩니다. 그리기 기능을 복구하려면 drawingManager.setMap(map)으로 지도에 다시 연결하거나 새 DrawingManager 객체를 생성해야 합니다.

그리기 이벤트

셰이프 오버레이가 생성되면 두 가지 이벤트가 발생합니다.

  • {overlay}complete 이벤트({overlay}circlecomplete, polygoncomplete 등의 오버레이 유형을 나타냄). 오버레이에 대한 참조가 인수로 전달됩니다.
  • overlaycomplete 이벤트. OverlayType과 오버레이에 대한 참조가 포함된 객체 리터럴이 인수로 전달됩니다.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

clickmousemove 등의 google.maps.Map 이벤트는 지도에 그리는 동안 비활성화됩니다.

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

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