Google Maps Mashup에서 고정 레전드 만드는 방법

웹 애플리케이션에서 Google Maps를 사용하면 특히 색상 코드가 표시된 푸시핀과 같은 기능을 활용할 때 사용자에게 상호작용적인 경험을 제공합니다. 그러나 정보를 효과적으로 전달하기 위해서는 이러한 색상에 대한 맥락을 제공하는 것이 중요합니다. 여기에서 레전드가 필요합니다. 이 포스트에서는 브라우저 크기 조정에 동적으로 대응하는 Google Maps mashup에 고정 레전드를 추가하는 문제를 다루겠습니다.

문제: Google Maps에 레전드 추가하기

특정 요일(월요일, 화요일 등)을 나타내는 색상 코드 푸시핀이 있는 Google Maps mashup이 포함된 웹페이지가 있다고 가정해 보십시오. 사용자가 브라우저 창과 상호작용하거나 크기를 조정할 때, 이러한 색상이 무엇을 나타내는지에 대한 명확성을 유지하는 것이 어려워질 수 있습니다. 특히 레전드 없이 그렇습니다. 문제는 창 크기가 변경되거나 링크 크기가 조정되더라도 고정된 상태를 유지하는 레전드를 만드는 것입니다.

Google Maps API는 옵션으로 GScreenOverlay 클래스를 제공하지만, 이는 이미지 오버레이만 허용합니다. 다행스럽게도, 텍스트가 포함된 DIV 요소를 사용할 수 있는 사용자 정의 컨트롤을 만드는 방법이 있습니다. 이제 해결책을 살펴보겠습니다.

해결책: 레전드용 사용자 정의 컨트롤 만들기

단계 1: 사용자 정의 컨트롤 정의하기

사용자 정의 레전드를 추가하려면 JavaScript를 사용하여 새 사용자 정의 컨트롤을 정의해야 합니다. 아래 코드는 회색 테두리와 흰색 배경을 가진 150w x 100h 박스를 만듭니다. 이 박스 안에 원하는 텍스트를 배치하십시오.

function MyPane() {}
MyPane.prototype = new GControl;
MyPane.prototype.initialize = function(map) {
  var me = this;
  me.panel = document.createElement("div");
  me.panel.style.width = "150px";
  me.panel.style.height = "100px";
  me.panel.style.border = "1px solid gray";
  me.panel.style.background = "white";
  me.panel.innerHTML = "Hello World!";  // 이 텍스트를 레전드로 바꾸세요
  map.getContainer().appendChild(me.panel);
  return me.panel;
};

단계 2: 레전드 위치 설정하기

레전드가 맵의 원하는 위치에 고정되도록 하려면 기본 위치를 정의해야 합니다. 이 예제에서는 레전드를 오른쪽 상단 모서리에 10픽셀 아래, 50픽셀 오른쪽으로 오프셋하여 고정합니다.

MyPane.prototype.getDefaultPosition = function() {
  return new GControlPosition(
      G_ANCHOR_TOP_RIGHT, new GSize(10, 50));
      // G_SIZE에서 언더스코어 "_"를 사용하고 HTML 엔티티를 사용하지 마십시오
};

단계 3: 패널 정의 완료하기

마지막으로, 사용자 정의 컨트롤이 우리가 방금 만든 패널을 반환할 수 있도록 확인합니다. 이렇게 하면 맵이 이를 올바르게 렌더링할 수 있습니다.

MyPane.prototype.getPanel = function() {
  return me.panel;
}
map.addControl(new MyPane());  // 사용자 정의 레전드 컨트롤을 맵에 추가합니다

단계 4: 레전드 사용자 정의하기

레전드의 텍스트와 스타일링을 사용자 정의하여 비주얼 필요에 맞게 조정하십시오. innerHTML 속성을 푸시핀에서 사용하는 색상 코딩에 대한 관련 정보로 업데이트하십시오.

결론

Google Maps mashup에 고정 레전드를 추가하면 맵 데이터에 필요한 맥락을 제공함으로써 사용자 경험을 크게 향상시킬 수 있습니다. 자바스크립트와 Google Maps API를 활용하면 사용자가 페이지와 상호작용하더라도 원하는 위치에 고정된 상태로 남는 사용자 정의 컨트롤을 효과적으로 구현할 수 있습니다.

이 튜토리얼은 Google Maps에서 탐색할 수 있는 많은 가능성 중 하나에 불과합니다. 레전드, 마커 또는 사용자 정의 오버레이를 추가하려는 경우, 핵심은 Google Maps API와 효과적으로 인터페이스하는 방법을 이해하는 것입니다.

이 단계를 사용하면 귀하의 맵이 정보 제공과 상호작용 모두를 충족할 수 있습니다. 즐거운 맵핑 되세요!