구글맵 - 맞춤형 컨트롤

맞춤형 컨트롤

사용자와의 상호작용을 처리하기 위해 기존 API 컨트롤의 스타일과 위치를 수정하는 것은 물론 자신의 고유한 컨트롤을 만들 수도 있습니다. 컨트롤은 절대 위치에서 지도 위에 떠 있는 정지된 위젯으로서, 밑에 있는 지도와 함께 움직이는 오버레이와는 다릅니다. 좀 더 기본적으로 말하면 컨트롤은 지도 상의 절대 위치에 있는 <div> 요소로서 사용자에게 UI를 표시하고 주로 이벤트 핸들러를 통해 사용자나 지도와 상호작용합니다.

고유한 맞춤형 컨트롤을 만들려면 몇 가지 '규칙'이 필요합니다. 다음 가이드라인을 참조하면 도움이 됩니다.

• 표시할 컨트롤 요소에 대한 적절한 CSS를 정의합니다.
• 지도 속성 변경이나 사용자 이벤트(예: 'click' 이벤트)에 대한 이벤트 핸들러를 통해 사용자나 지도와의 상호작용을 처리합니다.
• <div> 요소를 만들어 컨트롤을 유지하고 이 요소를 Map의 controls 속성에 추가합니다.

이러한 내용에 대해 아래에서 각각 설명합니다.

맞춤형 컨트롤 그리기

컨트롤을 그리는 방법은 사용자에게 달려 있습니다. 일반적으로 컨트롤을 하나의 단위로 다룰 수 있도록 단일 <div> 요소 내에 모든 컨트롤 표시를 배치하는 것이 좋습니다. 아래에 표시된 샘플에서는 이러한 디자인 패턴을 사용합니다.

멋진 컨트롤을 디자인하려면 CSS와 DOM 구조를 어느 정도 알아야 합니다. 다음 코드는 포함하는 <div>, 버튼 윤곽선을 보유할 <div> 및 버튼 내부를 보유할 또 다른 <div>에서 간단한 컨트롤을 만드는 방법을 보여줍니다.

// Create a div to hold the control.
var controlDiv = document.createElement('DIV');

// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';

// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home';
controlUI.appendChild(controlText);

맞춤형 컨트롤에서 이벤트 처리하기

컨트롤이 유용하려면 실제로 작업을 수행해야 합니다. 어떤 작업을 수행할 컨트롤을 만들지는 사용자에게 달려 있습니다. 컨트롤은 사용자 입력에 응답하거나Map의 상태에 응답할 수 있습니다.

사용자 입력에 대한 응답을 위해 Maps API는 교차 브라우저 이벤트 처리 메소드인 addDomListener()를 제공합니다. 이 메소드는 대부분의 브라우저에서 지원되는 DOM 이벤트를 처리합니다. 다음 코드 스니펫에서는 브라우저의 'click' 이벤트에 대한 리스너를 추가합니다. 이 이벤트는 지도가 아닌 DOM에서 수신합니다.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

맞춤형 컨트롤 배치하기

Map 객체의 controls 속성 내 적절한 위치에 두어 맞춤형 컨트롤을 지도에 배치하게 됩니다. 이 속성에는 google.maps.ControlPosition 배열이 포함됩니다.Node(일반적으로 <div>)를 적절한 ControlPosition에 추가하여 지도에 맞춤형 컨트롤을 추가합니다. 이러한 위치에 대한 자세한 내용은 위의 컨트롤 배치하기를 참조하세요.

각 ControlPosition은 해당 위치에 표시된 컨트롤의 MVCArray를 보관합니다. 따라서 컨트롤을 추가하거나 위치에서 제거하면 이에 따라 API가 컨트롤을 업데이트합니다.

API는 index 속성의 순서에 따라 각 위치에 컨트롤을 배치합니다. 더 낮은 색인의 컨트롤이 먼저 배치됩니다. 예를 들어 BOTTOM_RIGHT 위치에 있는 맞춤형 컨트롤이 두 개 있는 경우 이 색인 순서에 따라 색인 값이 낮은 컨트롤이 먼저 배치됩니다. 기본적으로 모든 맞춤형 컨트롤은 API 기본 컨트롤을 배치한 후에 배치됩니다. 이러한 동작은 컨트롤의 index 속성을 음수 값으로 설정하여 재정의할 수 있습니다. 일반적으로 특정 컨트롤을 같은 위치에 있는 기본 API 컨트롤 '앞에' 배치하려는 경우에만 색인 값을 설정해야 합니다.

다음 코드는 새 맞춤형 컨트롤(생성자가 표시되지 않음)을 만들어 지도의 TOP_RIGHT 위치에 추가합니다.

var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('DIV');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

맞춤형 컨트롤 예제

다음 별로 유용하지 않은 간단한 컨트롤이지만 위에서 설명한 여러 패턴을 결합하여 보여줍니다. 이 컨트롤은 지도의 중심을 특정 기본 위치로 설정하여 DOM'click' 이벤트에 응답합니다.

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 */

function HomeControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var controlUI = document.createElement('DIV');
  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '2px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior
  var controlText = document.createElement('DIV');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = 'Home';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

  // Create the DIV to hold the control and call the HomeControl() constructor
  // passing in this DIV.
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

예 보기(control-custom.html)