새로운 지도 스타일이 곧 Google Maps Platform에 제공될 예정입니다. 이 지도 스타일 지정 업데이트에는 새로운 기본 색상 팔레트와 지도 환경 및 사용성 개선사항이 포함됩니다. 모든 지도 스타일이 2025년 3월에 자동으로 업데이트됩니다. 사용 가능 여부 및 더 일찍 선택하는 방법에 대한 자세한 내용은
Google Maps Platform용 새로운 지도 스타일 을 참고하세요.
의견 보내기
시작하기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
고급 마커를 설정하려면 다음 단계를 따르세요.
API 키 가져오기 및 Maps JavaScript API 사용 설정하기
고급 마커를 사용하려면 결제 계정이 있는 Cloud 프로젝트가 필요하고 Maps JavaScript API가 사용 설정된 상태여야 합니다. 자세한 내용은 Google Cloud 프로젝트 설정 을 참고하세요.
API 키 가져오기
지도 ID 만들기
새 지도 ID 를 만들려면 Cloud 맞춤설정 의 단계를 따르세요.
지도 유형을 JavaScript 로 설정하고 벡터 또는 래스터 옵션을 선택합니다.
중요: 테스트의 경우 앱 코드에서 mapId: 'DEMO_MAP_ID'
를 사용하면 지도 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를 DEMO_MAP_ID
또는 자체 지도 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.
}
});
다음 단계
기본 고급 마커 만들기
의견 보내기
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-09-20(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
의견을 전달하고 싶나요?
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2024-09-20(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-09-20(UTC)"]]