고급 마커로 이전

google.maps.Marker(v3.56)는 2024년 2월 21일부터 지원 중단되었습니다. 새 google.maps.marker.AdvancedMarkerElement 클래스로 이전하는 것이 좋습니다. 고급 마커를 사용하면 기존 google.maps.Marker 클래스가 크게 개선됩니다. 이 지원 중단에 대해 자세히 알아보기

기존 마커를 고급 마커로 업데이트하려면 다음 단계를 따르세요.

  1. 마커 라이브러리를 가져오기 위한 코드를 추가합니다 (아래 단계 참고).
  2. google.maps.Marker을 google.maps.marker.AdvancedMarkerElement로 변경합니다. 가져오기 문에서 AdvancedMarker을 선언하는 경우 정규화된 경로를 생략할 수 있습니다.
  3. 지도 초기화 코드에 지도 ID를 추가합니다. 예를 들어 아직 지도 ID가 없으면 테스트 목적으로 mapId: 'DEMO_MAP_ID'를 사용합니다.

고급 마커 라이브러리 추가

라이브러리를 로드하는 데 사용하는 방법은 웹페이지에서 Maps JavaScript API를 로드하는 방식에 따라 다릅니다.

  • 웹페이지에서 동적 라이브러리 가져오기를 사용하는 경우 여기 표시된 대로 마커 라이브러리를 추가하고 런타임에 AdvancedMarkerElement (선택적으로 PinElement)를 가져옵니다.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • 웹페이지에서 기존 직접 스크립트 로드 태그를 사용하는 경우 다음 스니펫에 표시된 대로 로드 스크립트에 libraries=marker를 추가합니다.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Maps JavaScript API 로드에 대해 자세히 알아보기

예

다음 코드 예는 기존 마커를 추가하는 코드 및 고급 마커를 사용한 동일한 코드 예를 보여줍니다.

이전 전

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

이전 후

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

고급 마커 기능 살펴보기

고급 마커는 전에는 가능하지 않았던 방법으로 맞춤설정할 수 있습니다. 이제 마커의 크기(배율)를 조정하고 배경, 테두리, 글리프의 색상을 변경할 수 있습니다. 맞춤 그래픽 이미지는 더 쉽게 사용할 수 있으며 이제 HTML 및 CSS를 사용하여 맞춤 마커를 작성할 수 있습니다. 고급 마커로 할 수 있는 모든 작업에 대해 자세히 알아보세요.