3D 지도 맞춤설정

클라우드 기반 지도 스타일 지정을 사용하여 3D 기본 지도의 디자인을 맞춤설정할 수 있습니다.

클라우드 기반 지도 스타일 지정을 사용하면 사용자에게 표시되는 지도의 디자인과 분위기를 제어할 수 있습니다. 관심 장소 (POI)의 밀도, 특정 POI 카테고리 삭제, 지형지물의 채우기 또는 획 수정과 같은 기능을 제어하여 사용자에게 맞춤설정된 지도 환경을 만들 수 있습니다.

클라우드 기반 지도 스타일 지정은 Google Cloud 콘솔에서 코드 없는 편집 환경을 제공합니다. 지도 콘솔에서 스타일을 수정하면 애플리케이션에 자동으로 표시됩니다.

다음 예에서는 맞춤 스타일을 사용하여 레크리에이션 기능 아이콘과 텍스트의 색상을 주황색으로 변경하는 지도를 보여줍니다.

async function initMap() {
    const { Map3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200 },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f',
        mode: 'HYBRID',
        gestureHandling: "COOPERATIVE"
    });
    document.body.append(map);
}
initMap();
index.js

개요

클라우드 기반 지도 스타일 지정을 사용하여 3D 지도를 맞춤설정하는 프로세스는 2D 지도와 동일합니다.

1 지도 ID 만들기 지도 ID를 만듭니다. 지도 ID는 스타일을 처리하기 위해 애플리케이션에 전달됩니다. 후속 단계에서 맞춤 스타일을 이 지도 ID와 연결합니다.
2 클라우드 기반 지도 스타일 생성 이 단계에서는 '3D 하이브리드'를 선택하고 '라이트 모드'를 사용해야 합니다.
3 지도 스타일을 지도와 연결 1단계에서 만든 지도 ID에 스타일을 연결합니다.
4 앱에 지도 ID 추가 map-id 매개변수를 사용하여 코드에서 지도 ID를 지정합니다.
5 지도 ID 게시 맞춤 스타일의 변경사항은 게시 후 애플리케이션에 자동으로 통합됩니다.

지도 스타일 만들기에 대한 자세한 내용은 지도 스타일 만들기 및 사용을 참고하세요.

제한사항

Maps JavaScript에서 3D 지도와 함께 클라우드 기반 지도 스타일을 사용할 때는 다음과 같은 제한사항이 있습니다.

  • 어두운 모드는 지원되지 않습니다.
  • 데이터 기반 스타일 지정과 같은 지도 ID 지원 기능은 지원되지 않습니다.