3D 지도 맞춤설정

클라우드 기반 지도 스타일 지정을 사용하여 3D 기본 지도의 모양과 느낌을 맞춤설정할 수 있습니다.

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

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

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

async function init() {
    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', // Styles are associated with map IDs.
        mode: 'HYBRID',
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

개요

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

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

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

제한사항

Maps JavaScript에서 3D 지도와 함께 클라우드 기반 지도 스타일 지정을 사용할 때는 몇 가지 제한사항에 유의해야 합니다.

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