모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

사용자 지정 오버레이

  1. 소개
  2. 사용자 지정 오버레이 추가
    1. 오버레이 서브클래스 생성
    2. 오버레이 초기화
    3. 오버레이 그리기
  3. 사용자 지정 오버레이 제거
  4. 사용자 지정 오버레이 숨기기 및 표시

소개

오버레이는 위도/경도 좌표와 연동되어 있는 지도 위의 객체이므로 지도를 드래그하거나 확대/축소하면 움직입니다. 사전 지정된 오버레이 유형에 관한 내용은 지도에 그리기를 참조하세요.

Google Maps JavaScript API는 사용자 지정 오버레이를 생성하기 위한 OverlayView 클래스를 제공합니다. OverlayView는 오버레이를 생성할 때 구현해야 하는 여러 메서드를 제공하는 기본 클래스입니다. 또한, 이 클래스는 화면 좌표와 지도의 위치를 서로 변환할 수 있는 몇 가지 메서드를 제공합니다.

사용자 지정 오버레이 추가

다음은 사용자 지정 오버레이를 생성하는 데 필요한 단계를 요약한 내용입니다.

  • 사용자 지정 오버레이 객체의 prototypegoogle.maps.OverlayView()의 새 인스턴스로 설정합니다. 실제로 이렇게 하면 오버레이 클래스의 서브클래스가 생성됩니다.
  • 사용자 지정 오버레이의 생성자를 생성하고 초기화 매개변수를 설정합니다.
  • 프로토타입 내에 onAdd() 메서드를 구현하고 지도에 오버레이를 연결합니다. OverlayView.onAdd()는 지도가 오버레이를 연결할 준비가 되면 호출됩니다.
  • 프로토타입 내에 draw() 메서드를 구현하고 객체의 시각적 디스플레이를 처리합니다. OverlayView.draw()는 객체가 먼저 표시되면 호출됩니다.
  • 또한, onRemove() 메서드를 구현하여 오버레이 내에 추가한 요소를 정리해야 합니다.

아래는 각 단계에 대한 자세한 설명입니다. 실제로 작동하는 전체 예시도 볼 수 있습니다. 예시 보기(overlay-simple.html).

오버레이 서브클래스 생성

아래 예시는 OverlayView를 사용하여 간단한 이미지 오버레이를 생성합니다.

// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class therefore
// it's simpler to load the API synchronously, using
// google.maps.event.addDomListener().
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 62.323907, lng: -150.109291},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(62.281819, -150.287132),
      new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/' +
      'javascript/examples/full/images/talkeetna.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);
}

이제 USGSOverlay 클래스의 생성자를 생성하고 전달된 매개변수를 새 객체의 속성으로 초기화합니다.

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

아직 오버레이 생성자에서 지도에 이 오버레이를 연결할 수 없습니다. 먼저, 지도의 창은 지도에 객체가 표시되는 순서를 지정하므로, 모든 지도의 창이 사용 가능한지 확인해야 합니다. API는 이러한 상황이 발생했음을 나타내는 도우미 메서드를 제공합니다. 다음 섹션에서 이 메서드를 다룰 것입니다.

오버레이 초기화

오버레이를 처음 인스턴스화하고 표시할 준비를 마치면, 브라우저의 DOM을 통해 지도에 연결해야 합니다. API는 오버레이의 onAdd() 메서드를 호출하여 오버레이가 지도에 추가되었음을 나타냅니다. 이 메서드를 처리하기 위해 이미지를 고정할 <div>를 생성하고, <img> 요소를 추가하고, <div>에 연결한 다음 오버레이를 지도 중 하나에 연결합니다. 창은 DOM 트리 내의 노드입니다.

MapPanes 유형의 창은 지도에 다양한 계층이 쌓이는 순서를 지정합니다. 다음 창을 이용할 수 있으며, 아래에서 위로 쌓이는 순서대로 나열됩니다.

  • mapPane은 가장 낮은 창이고 타일 위에 있습니다. DOM 이벤트를 수신하지 않을 수도 있습니다. (창 0).
  • overlayLayer는 폴리라인, 폴리곤, 그라운드 오버레이, 타일 오버레이를 포함합니다. DOM 이벤트를 수신하지 않을 수도 있습니다. (창 1).
  • overlayShadow는 마커 그림자를 포함합니다. DOM 이벤트를 수신하지 않을 수도 있습니다. (창 2).
  • overlayImage는 마커 전경 이미지를 포함합니다. (창 3).
  • floatShadow는 정보 창 그림자를 포함합니다. overlayImage 위에 배치되므로, 마커가 정보 창의 그림자 안에 들어갈 수 있습니다. (창 4).
  • overlayMouseTarget은 마커의 투명 대상 등과 같이 DOM 마우스 이벤트를 수신하는 요소를 포함합니다. floatShadow 위에 배치되므로, 정보 창의 그림자에 있는 마커를 클릭할 수 있습니다. (창 5).
  • floatPane은 정보 창을 포함합니다. 모든 지도 오버레이 위에 위치합니다. (창 6).

우리의 이미지는 "그라운드 오버레이"이므로 overlayLayer 창을 사용할 것입니다. 이 창이 있으면 우리의 객체를 해당 창의 하위 요소로 연결할 것입니다.

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

오버레이 그리기

위의 코드에서 특정 시각적 디스플레이를 호출하지 않았다는 점에 유의하세요. API는 처음 추가될 때를 포함하여 지도에 오버레이를 그려야 할 때마다 오버레이에서 별도의 draw() 메서드를 호출합니다.

그러므로 우리는 이 draw() 메서드를 구현하고, getProjection()을 사용하여 오버레이의 MapCanvasProjection을 검색하고, 객체의 오른쪽 위와 왼쪽 아래 지점을 고정할 정확한 좌표를 계산할 것입니다. 그러면 <div>의 크기를 조절할 수 있습니다. 또한 오버레이의 생성자에서 지정한 경계와 일치하도록 이미지 크기가 조절됩니다.

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

사용자 지정 오버레이 제거

또한 onRemove() 메서드를 추가하여 지도에서 오버레이를 깨끗하게 삭제할 수 있습니다.

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};

사용자 지정 오버레이 숨기기 및 표시

단순히 오버레이를 생성하거나 삭제하는 것이 아니라 오버레이를 숨기거나 표시하고자 한다면, hide()show() 메서드를 구현하여 오버레이의 가시성을 조정할 수 있습니다. 또는, 오버레이를 지도의 DOM에서 분리할 수 있습니다. 다만 이 작업은 약간 더 많은 리소스가 소모됩니다. 오버레이를 지도의 DOM에 다시 연결하면, 오버레이의 onAdd() 메서드가 다시 호출됩니다.

다음 예시는 오버레이의 프로토타입에 컨테이너 <div>의 표시 여부를 전환하는 hide()show() 메서드를 추가합니다. 또한, 오버레이를 지도에서 연결/분리하는 toggleDOM() 메서드도 추가합니다.

// Set the visibility to 'hidden' or 'visible'.
USGSOverlay.prototype.hide = function() {
  if (this.div_) {
    // The visibility property must be a string enclosed in quotes.
    this.div_.style.visibility = 'hidden';
  }
};

USGSOverlay.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = 'visible';
  }
};

USGSOverlay.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility === 'hidden') {
      this.show();
    } else {
      this.hide();
    }
  }
};

// Detach the map from the DOM via toggleDOM().
// Note that if we later reattach the map, it will be visible again,
// because the containing <div> is recreated in the overlay's onAdd() method.
USGSOverlay.prototype.toggleDOM = function() {
  if (this.getMap()) {
    // Note: setMap(null) calls OverlayView.onRemove()
    this.setMap(null);
  } else {
    this.setMap(this.map_);
  }
};

사용자 인터페이스 관리:

<!-- Add an input button to initiate the toggle method on the overlay. -->
    <div id="floating-panel">
      <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
      <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
    </div>

예시 보기(overlay-hideshow.html).

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

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