관리

플랫폼 선택: Android iOS 자바스크립트

컨트롤 개요

Maps JavaScript API를 통해 표시되는 지도에는 사용자가 지도와 상호작용할 수 있는 UI 요소가 포함되어 있습니다. 이러한 요소를 컨트롤이라고 하며 애플리케이션에 이러한 컨트롤의 변형을 포함할 수 있습니다. 또는 아무것도 하지 않고 Maps JavaScript API가 모든 컨트롤 동작을 처리하도록 할 수 있습니다.

다음 지도는 Maps JavaScript API에서 표시하는 기본 컨트롤 집합을 보여줍니다.

아래는 지도에 사용할 수 있는 컨트롤 세트의 전체 목록입니다.

• 확대/축소 컨트롤에는 지도의 확대/축소 수준을 변경할 수 있는 '+' 및 '-' 버튼이 표시됩니다. 이 컨트롤은 기본적으로 지도의 오른쪽 하단에 표시됩니다.
• 드롭다운 또는 가로 버튼 바 스타일로 지도 유형 컨트롤을 사용할 수 있어 사용자가 지도 유형(ROADMAP, SATELLITE, HYBRID, TERRAIN)을 선택할 수 있습니다. 이 컨트롤은 기본적으로 지도의 왼쪽 상단에 표시됩니다.
• 스트리트 뷰 컨트롤에는 스트리트 뷰를 사용 설정하기 위해 지도로 드래그할 수 있는 페그맨 아이콘이 포함됩니다. 이 컨트롤은 기본적으로 지도의 오른쪽 하단에 표시됩니다.
• 회전 컨트롤은 경사 이미지가 포함된 지도에 기울이기 및 회전 옵션을 조합하여 제공합니다. 이 컨트롤은 기본적으로 지도의 오른쪽 하단에 표시됩니다. 자세한 내용은 45° 이미지를 참고하세요.
• 배율 컨트롤은 지도 축척 요소를 표시합니다. 이 컨트롤은 기본적으로 비활성화되어 있습니다.
• 전체 화면 컨트롤은 전체 화면 모드로 지도를 여는 옵션을 제공합니다. 이 컨트롤은 데스크톱과 휴대기기에서 기본적으로 사용 설정됩니다. 참고: iOS는 전체 화면 기능을 지원하지 않습니다. 따라서 iOS 기기에서는 전체 화면 컨트롤이 표시되지 않습니다.
• 단축키 컨트롤에서 지도와 상호작용하기 위한 단축키 목록이 표시됩니다.

지도 컨트롤에 직접 액세스하거나 수정하지 마세요. 대신, 컨트롤의 가시성과 표시에 영향을 미치는 지도의 MapOptions 필드를 수정하세요. 지도를 인스턴스화할 때 (적절한 MapOptions 사용) 컨트롤 표시를 조정하거나 setOptions()을 호출하여 지도의 옵션을 변경함으로써 지도를 동적으로 수정할 수 있습니다.

이러한 컨트롤이 모두 기본적으로 활성화되는 것은 아닙니다. 기본 UI 동작 및 이러한 동작을 수정하는 방법을 알아보려면 아래에서 기본 UI를 참고하세요.

기본 UI

기본적으로, 지도가 너무 작으면(200x200px) 모든 컨트롤이 사라집니다. 컨트롤을 표시하도록 명시적으로 설정하여 이 동작을 재정의할 수 있습니다. 지도에 컨트롤 추가하기를 참고하세요.

컨트롤의 동작과 모양은 모바일과 데스크톱 기기에서 동일하며, 전체 화면 컨트롤은 예외입니다 (컨트롤 목록에 설명된 동작 참고).

또한, 키보드 처리는 기본적으로 모든 기기에서 켜져 있습니다.

기본 UI 비활성화

API의 기본 UI 버튼을 완전히 사용 중지하는 것이 좋습니다. 이렇게 하려면 지도의 disableDefaultUI 속성 (MapOptions 객체 내)을 true로 설정하세요. 이 속성은 Maps JavaScript API에서 모든 UI 컨트롤 버튼을 사용 중지합니다. 하지만 gestureHandling 및 keyboardShortcuts 속성으로 각각 제어되는 기본 지도의 마우스 동작이나 단축키에는 영향을 미치지 않습니다.

다음 코드는 UI 버튼을 사용 중지합니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

지도에 컨트롤 추가

UI 동작이나 컨트롤을 삭제, 추가 또는 수정하여 인터페이스를 맞춤설정하고 향후 업데이트로 인해 동작이 변경되지 않도록 할 수 있습니다. 기존 동작만 추가하거나 수정하려면 컨트롤이 애플리케이션에 명시적으로 추가되는지 확인해야 합니다.

지도에 기본적으로 표시되는 컨트롤도 있지만, 특별히 요청하지 않는 한 다른 컨트롤은 표시되지 않습니다. 지도에서 컨트롤을 추가하거나 삭제하는 것은 다음 MapOptions 객체에서 지정됩니다. 이 필드는 true로 설정하여 컨트롤을 표시하거나 false로 설정하여 숨길 수 있습니다.

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

기본적으로, 지도가 200x200px보다 작으면 모든 컨트롤이 사라집니다. 컨트롤을 표시하도록 명시적으로 설정하여 이 동작을 재정의할 수 있습니다. 예를 들어 다음 표는 지도 크기 및 zoomControl 필드 설정에 따라 확대/축소 컨트롤이 표시되는지 여부를 보여줍니다.

지도 크기	zoomControl	표시 여부
모두	false	아니요
모두	true	예
>= 200x200픽셀	undefined	예
200x200픽셀	undefined	아니요

다음 예는 확대/축소 컨트롤을 숨기고 배율 컨트롤을 표시하도록 지도를 설정합니다. Google에서는 기본 UI를 명시적으로 사용 중지하지 않으므로 이러한 수정사항은 기본 UI 동작에 추가됩니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

컨트롤 옵션

여러 컨트롤을 구성하여 컨트롤의 동작이나 모양을 변경할 수 있습니다. 예를 들어 지도 유형 컨트롤은 가로 막대 또는 드롭다운 메뉴로 표시될 수 있습니다.

이러한 컨트롤은 지도를 만들 때 MapOptions 객체 내에서 적절한 컨트롤 옵션 필드를 변경하여 수정합니다.

예를 들어 지도 유형 컨트롤을 변경하는 옵션은 mapTypeControlOptions 필드에 표시됩니다. 지도 유형 컨트롤은 다음 style 옵션 중 하나에 표시될 수 있습니다.

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR는 Google 지도에 표시된 대로 가로줄에 버튼으로 컨트롤 배열을 표시합니다.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU는 드롭다운 메뉴를 통해 지도 유형을 선택할 수 있는 단일 버튼 컨트롤을 표시합니다.
• google.maps.MapTypeControlStyle.DEFAULT는 화면 크기에 따라 달라지는 기본 동작을 표시하며 향후 API 버전에서 변경될 수 있습니다.

컨트롤 옵션을 수정하는 경우 적절한 MapOptions 값을 true로 설정하여 컨트롤을 명시적으로 사용 설정해야 합니다. 예를 들어 DROPDOWN_MENU 스타일을 표시하도록 지도 유형 컨트롤을 설정하려면 MapOptions 객체 내에 다음 코드를 사용하세요.

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

다음 예는 컨트롤의 기본 위치와 스타일을 변경하는 방법을 보여줍니다.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

일반적으로 컨트롤은 지도 생성 시 구성됩니다. 그러나, Map의 setOptions() 메서드를 호출하고 새 컨트롤 옵션을 전달하여 컨트롤 표시를 동적으로 변경할 수 있습니다.

컨트롤 수정

맵의 MapOptions 객체 내의 필드를 통해 지도를 만들 때 컨트롤의 뷰를 지정합니다. 이러한 필드는 아래에 나와 있습니다.

• zoomControl는 확대/축소 컨트롤을 사용/사용 중지합니다. 기본적으로 이 컨트롤은 표시되며 지도의 오른쪽 하단에 표시됩니다. zoomControlOptions 필드는 이 컨트롤에 사용할 ZoomControlOptions를 추가로 지정합니다.
• mapTypeControl는 사용자가 지도 유형 (예: 지도 및 위성) 간에 전환할 수 있는 지도 유형 컨트롤을 사용 설정/사용 중지합니다. 기본적으로 이 컨트롤은 표시되고 지도의 왼쪽 상단에 표시됩니다. mapTypeControlOptions 필드는 이 컨트롤에 사용할 MapTypeControlOptions를 추가로 지정합니다.
• streetViewControl는 사용자가 스트리트 뷰 파노라마를 활성화할 수 있는 페그맨 컨트롤을 사용 설정/사용 중지합니다. 기본적으로 이 컨트롤은 표시되며 지도의 오른쪽 하단에 표시됩니다. streetViewControlOptions 필드는 이 컨트롤에 사용할 StreetViewControlOptions를 추가로 지정합니다.
• rotateControl는 45° 이미지의 방향을 조정하기 위한 회전 컨트롤을 표시할지 또는 표시하지 않을지를 설정합니다. 기본적으로 컨트롤의 표시 여부는 현재 확대/축소 및 위치에서 지정된 지도 유형에 대해 45° 이미지의 유무에 따라 결정됩니다. 지도의 rotateControlOptions를 설정하여 사용할 RotateControlOptions를 지정하여 컨트롤의 동작을 변경할 수 있습니다. 현재 사용 가능한 45° 이미지가 없으면 컨트롤을 표시할 수 없습니다.
• scaleControl는 간단한 지도 축척을 제공하는 Scale 컨트롤을 사용 설정/사용 중지합니다. 기본적으로, 이 컨트롤은 표시되지 않습니다. 사용 설정하면 항상 지도의 오른쪽 하단에 표시됩니다. scaleControlOptions는 이 컨트롤에 사용할 ScaleControlOptions를 추가로 지정합니다.
• fullscreenControl - 전체 화면 모드로 지도를 여는 컨트롤을 사용 설정하거나 사용 중지합니다. 이 컨트롤은 기본적으로 데스크톱 및 Android 기기에서 사용 설정되어 있습니다. 활성화된 경우, 이 컨트롤이 지도의 오른쪽 위에 나타납니다. fullscreenControlOptions는 이 컨트롤에 사용할 FullscreenControlOptions를 추가로 지정합니다.

처음에 비활성화한 컨트롤의 옵션을 지정할 수도 있습니다.

컨트롤 위치 지정

대부분의 컨트롤 옵션에는 지도에서 컨트롤을 배치할 위치를 나타내는 position 속성(ControlPosition 유형)이 포함됩니다. 이러한 컨트롤의 위치 지정은 절대값이 아닙니다. 대신 API는 주어진 제약 조건 (예: 지도 크기) 내에서 기존 지도 요소 또는 다른 컨트롤을 중심으로 컨트롤을 지능적으로 배치합니다.

참고: API는 컨트롤을 지능적으로 정렬하려고 하지만 특정 레이아웃의 컨트롤이 겹치지 않는다고 보장할 수는 없습니다.

다음과 같은 컨트롤 위치가 지원됩니다.

• TOP_CENTER는 지도의 상단 중심을 따라 컨트롤을 배치해야 함을 나타냅니다.
• TOP_LEFT는 지도의 왼쪽 상단을 따라 컨트롤을 배치해야 함을 나타냅니다. 컨트롤의 하위 요소는 상단 중심을 향해 있습니다.
• TOP_RIGHT는 지도의 오른쪽 상단을 따라 컨트롤을 배치해야 함을 나타냅니다. 컨트롤의 하위 요소는 상단 중심을 향해 있습니다.
• LEFT_TOP는 지도의 왼쪽 상단을 따라, 모든 TOP_LEFT 요소 아래에 컨트롤이 배치되어야 함을 나타냅니다.
• RIGHT_TOP는 지도의 오른쪽 상단을 따라, TOP_RIGHT 요소 아래에 컨트롤을 배치해야 함을 나타냅니다.
• LEFT_CENTER는 지도의 왼쪽을 따라, TOP_LEFT 및 BOTTOM_LEFT 위치 사이의 중앙에 컨트롤이 배치되어야 함을 나타냅니다.
• RIGHT_CENTER는 지도의 오른쪽을 따라 TOP_RIGHT 및 BOTTOM_RIGHT 위치 사이의 중앙에 컨트롤이 배치되어야 함을 나타냅니다.
• LEFT_BOTTOM는 지도의 왼쪽 하단을 따라, 모든 BOTTOM_LEFT 요소 위에 컨트롤을 배치해야 함을 나타냅니다.
• RIGHT_BOTTOM는 지도의 오른쪽 하단을 따라, 모든 BOTTOM_RIGHT 요소 위에 컨트롤을 배치해야 함을 나타냅니다.
• BOTTOM_CENTER는 지도의 하단 중심을 따라 컨트롤이 배치되어야 함을 나타냅니다.
• BOTTOM_LEFT는 지도의 왼쪽 하단을 따라 컨트롤을 배치하여 컨트롤의 하위 요소가 하단 중심을 향해 배치되어야 함을 나타냅니다.
• BOTTOM_RIGHT는 지도의 오른쪽 하단을 따라 컨트롤을 배치해야 함을 나타냅니다. 컨트롤의 하위 요소는 하단 중심 쪽을 향합니다.

이러한 위치는 게재위치를 수정할 수 없는 UI 요소의 위치 (예: 저작권 및 Google 로고)와 동시에 표시될 수 있습니다. 이 경우 컨트롤은 각 위치에 대해 설명된 로직에 따라 흐르며 표시된 위치와 최대한 가깝게 표시됩니다.

다음 예는 모든 컨트롤이 다양한 위치에 사용 설정된 간단한 지도를 보여줍니다.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

사용자 지정 컨트롤

기존 API 컨트롤의 스타일과 위치를 수정할 뿐만 아니라 사용자와의 상호작용을 처리하는 자체 컨트롤을 만들 수 있습니다. 컨트롤은 절대 위치에서 지도 위에 떠 있는 고정된 위젯으로, 기본 지도와 함께 이동하는 오버레이와는 다릅니다. 더 기본적으로 컨트롤은 지도에 절대 위치를 가지고 있고 사용자에게 UI를 표시하며 일반적으로 이벤트 핸들러를 통해 사용자나 지도와의 상호작용을 처리하는 <div> 요소입니다.

자체 사용자 지정 컨트롤을 생성할 때는 규칙이 거의 필요 없습니다. 하지만 다음 가이드라인을 따르는 것이 좋습니다.

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

각각에 대한 내용은 아래에서 설명됩니다.

사용자 지정 컨트롤 그리기

컨트롤을 그리는 방식은 여러분에게 달려 있습니다. 일반적으로 컨트롤을 하나의 단위로 조작할 수 있도록 모든 컨트롤 프레젠테이션을 단일 <div> 요소 내에 배치하는 것이 좋습니다. 아래 샘플에서 이 디자인 패턴을 사용할 것입니다.

매력적인 컨트롤을 디자인하려면 CSS와 DOM 구조를 어느 정도 알아야 합니다. 다음 코드는 시카고를 중심으로 하는 지도를 화면 이동하는 버튼 요소를 생성하는 함수를 보여줍니다.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

사용자 지정 컨트롤에서 이벤트 처리

컨트롤이 유용하려면 실제로 어떤 동작을 해야 합니다. 제어의 기능은 개발자가 직접 결정합니다. 컨트롤은 사용자 입력에 응답하거나 Map의 상태 변경에 응답할 수 있습니다.

사용자 입력에 응답하려면 지원되는 DOM 이벤트를 처리하는 addEventListener()를 사용합니다. 다음 코드 스니펫은 브라우저의 'click' 이벤트에 대한 리스너를 추가합니다. 이 이벤트는 지도가 아니라 DOM에서 수신된다는 점에 유의하세요.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

맞춤 컨트롤에 액세스 가능하게 만들기

컨트롤이 키보드 이벤트를 수신하고 스크린 리더에 올바르게 표시되도록 하려면 다음 단계를 따르세요.

• 버튼, 양식 요소, 라벨에는 항상 기본 HTML 요소를 사용합니다. 네이티브 컨트롤을 보관하기 위한 컨테이너로만 DIV 요소를 사용하세요. DIV를 대화형 UI 요소로 재사용하면 안 됩니다.
• label 요소, title 속성 또는 aria-label 속성을 사용하여 UI 요소에 관한 정보를 제공합니다.

사용자 지정 컨트롤 위치 지정

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

각 ControlPosition은 그 위치에 표시된 컨트롤의 MVCArray을 저장합니다. 따라서 위치에서 컨트롤을 추가하거나 삭제하면 API는 이에 따라 컨트롤을 업데이트합니다.

API는 index 속성의 순서에 따라 각 위치에 컨트롤을 배치합니다. 더 낮은 색인의 컨트롤이 먼저 배치됩니다. 예를 들어 BOTTOM_RIGHT 위치에 두 개의 맞춤 컨트롤이 이 색인 순서에 따라 배치되며 더 낮은 색인 값이 우선합니다. 기본적으로 모든 맞춤 컨트롤은 API 기본 컨트롤을 배치한 후에 배치됩니다. 컨트롤의 index 속성을 음수 값으로 설정하여 이 동작을 재정의할 수 있습니다. 맞춤 컨트롤은 로고의 왼쪽이나 저작권의 오른쪽에 배치할 수 없습니다.

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

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

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// 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_CENTER].push(centerControlDiv);

사용자 지정 컨트롤 예시

다음 컨트롤은 간단하지만 (특히 유용하지는 않음) 위에 표시된 패턴을 결합합니다. 이 컨트롤은 지도의 기본 위치를 특정 기본 위치로 지정하여 DOM 'click' 이벤트에 응답합니다.

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

컨트롤에 상태 추가

컨트롤은 상태를 저장할 수도 있습니다. 다음 예는 이전 예와 유사하지만, 새로운 홈 위치를 표시하도록 컨트롤을 설정하는 추가 '홈 설정' 버튼이 컨트롤에 포함되어 있습니다. 이를 위해 컨트롤에 home_ 속성을 만들어 이 상태를 저장하고 해당 상태의 getter와 setter를 제공합니다.

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 참고하세요.

자바스크립트

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

참고: 자바스크립트는 TypeScript 스니펫에서 컴파일됩니다.

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell