공지사항: 새로운 기본 지도 스타일이 곧 Google Maps Platform에 제공될 예정입니다. 이 지도 스타일 지정 업데이트에는 새로운 기본 색상 팔레트, 현대화된 핀, 지도 환경 및 사용성 개선사항이 포함됩니다. 모든 지도 스타일이 2025년 3월에 자동으로 업데이트됩니다. 사용 가능 여부 및 더 일찍 선택하는 방법에 대한 자세한 내용은 Google Maps Platform용 새로운 지도 스타일을 참고하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

시작하기

플랫폼 선택: Android iOS JavaScript

고급 마커를 설정하려면 다음 단계를 따르세요.

API 키 가져오기 및 Maps JavaScript API 사용 설정하기

고급 마커를 사용하려면 결제 계정이 있는 Cloud 프로젝트가 필요하고 Maps JavaScript API가 사용 설정된 상태여야 합니다. 자세한 내용은 Google Cloud 프로젝트 설정을 참고하세요.

API 키 가져오기

지도 ID 만들기

새 지도 ID를 만들려면 Cloud 맞춤설정의 단계를 따르세요. 지도 유형을 JavaScript로 설정하고 벡터 또는 래스터 옵션을 선택합니다.

벡터 지도 ID 만들기

지도 초기화 코드 업데이트

방금 만든 지도 ID가 필요합니다. 지도 ID는 지도 관리 페이지에서 찾을 수 있습니다.

Maps JavaScript API를 로드합니다.

필요한 경우 async 함수 내에서 고급 마커 라이브러리를 로드합니다.

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

mapId 속성을 사용하여 지도를 인스턴스화할 때 지도 ID를 제공합니다. 이는 개발자가 제공한 지도 ID 또는 DEMO_MAP_ID일 수 있습니다.
```
const map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'YOUR_MAP_ID'
});
```

지도 기능 확인(선택사항)

고급 마커에는 지도 ID가 필요합니다. 지도 ID가 누락된 경우 고급 마커를 로드할 수 없습니다. 문제 해결을 위해 지도 기능 변경사항을 수신하는 mapcapabilities_changed 리스너를 추가할 수도 있습니다. 지도 기능을 사용하는 것은 선택사항이며 테스트 및 문제 해결 또는 런타임 대체 목적으로만 사용하는 것이 좋습니다.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

다음 단계

기본 고급 마커 만들기