1. 시작하기 전에
이 Codelab에서는 지도 JavaScript의 포토리얼리스틱 3D 지도를 사용하여 첫 번째 3D 지도를 만드는 방법을 알아봅니다. Maps JavaScript API의 올바른 구성요소를 로드하고, 첫 번째 3D 지도를 표시하고, 지형지물 그리기에 관한 기본사항을 알아봅니다.
빌드할 항목
이 Codelab에서는 다음을 실행하는 3D 웹 앱을 빌드합니다.
- Maps JavaScript API를 동적으로 로드합니다.
- 토론토의 CN 타워를 중심으로 하는 3D 지도를 표시합니다.
- 위치 주변 경계를 표시합니다.
- 3D 지도에서 관심 장소를 사용 중지합니다.
- 경계를 돌출하여 위치를 포함합니다.
학습할 내용
- Google Maps Platform 시작하기
- 동적 라이브러리 가져오기를 사용하여 JavaScript 코드에서 Maps JavaScript API를 동적으로 로드합니다.
- Map3DElement 클래스를 사용하여 3D 지도를 로드합니다.
- 다각형과 돌출을 사용하여 지도에 그리기
2. 기본 요건
이 Codelab을 완료하려면 다음 항목을 숙지해야 합니다. 이미 Google Maps Platform 사용에 익숙한 경우 Codelab으로 바로 건너뛰어도 됩니다.
필수 Google Maps Platform 제품
이 Codelab에서는 다음 Google Maps Platform 제품을 사용합니다.
- Maps JavaScript API
예. 페이지에 3D 지도를 추가하는 데 필요한 것은 이것뿐입니다. 매우 간단합니다.
이 Codelab의 기타 요구사항
이 Codelab을 완료하려면 다음과 같은 계정, 서비스, 도구가 필요합니다.
- 결제가 사용 설정된 Google Cloud 계정
- Maps JavaScript API가 사용 설정된 Google Maps Platform API 키
- 자바스크립트, HTML 및 CSS에 대한 기본 지식
- 원하는 텍스트 편집기 또는 IDE: 수정한 파일을 저장하여 확인
- 작업 중에 파일을 볼 수 있는 웹브라우저
3. 설정
Google Maps Platform 설정하기
Google Cloud Platform 계정 및 결제가 사용 설정된 프로젝트가 없는 경우 Google Maps Platform 시작하기 가이드를 참고하여 결제 계정 및 프로젝트를 만듭니다.
- Cloud Console에서 프로젝트 드롭다운 메뉴를 클릭하고 이 Codelab에 사용할 프로젝트를 선택합니다.
4. Maps JavaScript API 로드하기
설정 섹션의 모든 단계를 완료했다면 첫 번째 3D 지도를 빌드할 준비가 되었습니다.
상상할 수 있는 가장 간단한 웹페이지를 만듭니다.
먼저 모든 코드를 호스팅할 매우 기본적인 웹페이지를 만듭니다. 원하는 편집기나 플랫폼에서 이 작업을 실행할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
코드를 추가하고 3dmap.html과 같은 이름을 사용하여 액세스 가능한 위치에 파일을 저장한 다음 웹브라우저에서 파일을 열어 페이지의 현재 상태를 확인하고 오류가 있는지 확인합니다.
2D 지도와 마찬가지로 3D 지도의 기반은 Maps JavaScript API이므로 먼저 이를 로드해야 합니다.
여러 가지 방법으로 로드할 수 있으며 자세한 내용은 문서의 Maps JavaScript API 로드 섹션을 참고하세요.
이 데모에서는 로드해야 하는 요소만 제어하여 다운로드 크기와 시작 시간을 절약할 수 있는 최신 동적 라이브러리 가져오기 메서드를 사용합니다.
동적 로더 추가
동적 로더를 사용하려면 다음 스크립트 태그를 웹페이지에 추가하고 적절한 위치에 2단계에서 가져온 자체 API 키를 추가하세요. 이 스크립트 태그는 기본 웹페이지의 본문 섹션 사이에 배치합니다.
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
제품 출시의 이 단계에서는 API의 알파 브랜치를 사용하여 3D 지도에 액세스합니다. 여기에는 제품의 가장 실험적인 기능이 포함되어 있으며, 출시 시 사용할 준비를 할 수 있도록 개발 중인 사전 체험판 코드를 테스트할 수 있습니다.
이제 동적 로더가 포함된 기본 웹페이지가 만들어졌습니다. 페이지를 열면 뷰가 비어 있지만 오류는 없어야 합니다. 이제 3D 지도를 추가할 수 있습니다.
어떤 이유로든 코드가 작동하지 않으면 6단계로 이동하여 최종 결과와 비교하여 잘못된 부분을 확인할 수 있습니다.
페이지가 작동하지 않는 이유를 알아보려면 브라우저의 오류 콘솔을 살펴보고 원인을 디버그하세요. 오류 페이지에서는 다양한 브라우저에서 이를 수행하는 방법을 안내하고 다양한 오류 메시지를 설명하며 API가 작동하지 않는 몇 가지 일반적인 이유를 제공합니다. 이 리소스는 개발 과정에서 구현에 문제가 있는지 확인하는 데 유용합니다.
5. 지도 표시하기
이제 페이지에 첫 번째 3D 지도를 추가할 준비가 되었습니다.
3D 지도는 3D 지도 인스턴스를 만들고 작업할 수 있는 google.maps.maps3d.Map3DElement 클래스를 사용하여 만듭니다. 이 Codelab에서는 HTML 태그를 통해서가 아니라 3D 지도 객체를 직접 사용합니다.
Init 함수 만들기 및 라이브러리 로드
먼저 요소를 페이지에 로드하는 함수를 만들어 보겠습니다. 코드를 살펴보면 먼저 비동기 함수를 만듭니다. 이를 통해 나머지 코드를 진행하기 전에 전체 요소가 로드되었는지 확인할 수 있습니다. 그런 다음 페이지가 로드될 때 init 함수를 실행합니다.
페이지의 본문 섹션 내 로드 스크립트 뒤에 추가합니다.
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
계속하기 전에 await 표현식을 사용하여 라이브러리가 로드되었는지 확인합니다.
3D 지도 요소 만들기 및 위치 지정하기
다음으로 지도 뷰를 표시할 위치를 지정해야 합니다. 3D 지도의 경우 보기를 설정하는 데 사용할 수 있는 다양한 매개변수가 있습니다. 장면 내에서 보고 있는 대상을 설명하는 가상 카메라 매개변수를 나타냅니다.
다음과 같이 CN 타워의 뷰를 만들어 보겠습니다.
먼저 확인하려는 좌표를 지정해야 합니다. 두 가지 뷰로 구성됩니다.
- 고도를 포함하여 확인하려는 지점입니다.
- 지점을 바라보는 가상 카메라의 거리와 방향입니다.
다음 이미지를 보면 이러한 설정이 어떻게 작동하는지 알 수 있습니다.
요소의 중심은 내가 보고 있는 지점이고, 범위는 내가 물체에서 얼마나 떨어져 있는지 나타내는 거리이며, 기울기는 내가 이미지를 보고 있는 각도입니다. 객체의 방향과 롤도 제어하려면 이를 설정할 수도 있지만 여기서는 사용하지 않습니다.
이제 페이지에서 3D 지도를 만들겠습니다. 라이브러리를 가져온 후 init 섹션의 페이지에 다음 코드를 추가합니다.
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
먼저 요소를 만들고 적절한 위치 매개변수를 설정한 다음 페이지에 구성요소를 추가합니다 (원하는 경우 기존 div가 있는 경우 이를 할당할 수 있음).
이제 코드가 다음 예와 같이 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
이제 파일을 저장하고 브라우저에서 페이지를 열어 작동하는지 확인할 수 있습니다. 이미지와 같이 타워를 내려다보는 카메라가 표시됩니다. 계속 진행하기 전에 잠시 놀아보고 탑 위에 상자를 추가합니다.
6. 지형지물 추가 및 돌출
이제 3D 지도가 있으므로 사용자에게 관심 장소임을 알리기 위해 객체를 강조 표시해 보겠습니다. 이 경우 다각형과 돌출 함수를 사용하여 CN 타워 주위에 상자를 만들어 다음과 같은 뷰를 만듭니다.
잡동사니 숨기기
가장 먼저 관심 장소가 사용 중지되었음을 확인할 수 있습니다. 이 지도에서는 타워 자체에 초점을 맞추고 싶으므로 다른 시각적 요소를 삭제해야 합니다.
이렇게 하려면 라벨을 숨기도록 코드를 변경해야 합니다. 지점 숨기기 위해 지도의 모드 선을 SATELLITE로 업데이트합니다.
mode: MapMode.SATELLITE,
이 속성을 설정하면 지도에서 라벨이 사용 중지됩니다. 여기에는 관심 장소뿐만 아니라 도로 및 경계선도 포함되며 위치를 '깨끗하게' 볼 수 있습니다.
다각형 추가 및 스타일 지정
다음 단계는 페이지에 다각형을 추가하는 것입니다. 이 작업은 두 단계로 진행할 수 있습니다. 먼저 필요한 정보가 포함된 함수를 로드하고 다음으로 다각형의 스타일 세부정보(예: 색상, 다른 지형지물 뒤에 표시되는지 여부)를 지정해야 합니다.
먼저 다음 코드 줄을 사용하여 페이지에 필요한 클래스를 추가합니다.
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
그러면 뷰에 다각형 객체를 추가하는 데 필요한 Polygon3DElement 및 AltitudeMode 클래스가 페이지에 로드됩니다.
다각형에는 획 두께, 색상(이름 또는 16진수 값), 경계 및 채우기 설정의 불투명도에서 다른 지형지물이나 건물 뒤에 표시되는지 여부(예 : 가려진 구간 그리기)까지 뷰를 제어할 수 있는 다양한 설정이 있을 수 있습니다. 자세한 내용은 Polygon3DElement 클래스 문서를 참고하세요.
다각형이 돌출된 방식으로 그려지도록 설정해야 하는 다른 기능도 있습니다. 즉, 설정된 고도에서 다각형을 그린 다음 지면까지 연장합니다. 이렇게 하면 다각형에 상자와 같은 높이가 적용됩니다 (위 이미지 참고). 또한 다각형에서 고도 모드를 설정해야 하므로 위에서 AltitudeMode 상수를 로드해야 했습니다. 다각형을 돌출하려면 다각형 꼭짓점의 높이에서 올바른 위치를 가져오기 위해 ABSOLUTE 또는 RELATIVE_TO_GROUND로 설정해야 합니다.
이 코드는 이러한 속성이 포함된 리터럴 객체를 만들고, 이 객체는 다음과 같이 Polygon3DElement 객체를 만드는 데 사용할 수 있습니다.
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
이제 다각형 객체를 만들었으므로 지리적 좌표도 설정해야 합니다. 다각형은 표현 방식에 따라 내부 및 외부 좌표를 모두 가질 수 있습니다. innerCoordinates는 다각형 내부의 잘린 부분의 형태를 제공하고 outerCoordinates는 다각형의 외부 경계를 정의합니다. 선이 아닌 다각형이므로 완전한 도형을 제공하려면 좌표가 동일한 지점에서 시작하고 끝나야 합니다.
LatLng 또는 LatLngAltitude 객체 또는 리터럴 배열을 사용하여 좌표를 지정할 수 있으며, 기본 다각형에서 이를 확인할 수 있습니다.
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
이제 다각형의 스타일과 좌표를 설정했으므로 페이지에 추가할 수 있습니다. 다각형은 지도 요소의 하위 요소이며 페이지의 기존 지도 객체에 추가해야 합니다. 페이지에 다음 코드를 추가합니다.
map3DElement.append(towerPolygon);
완료되면 다음과 같이 전체 구현이 완료됩니다 (단, 자체 API 키가 있음). 이제 페이지를 실행하고 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
코드가 올바르면 다음과 같은 3D 지도와 다각형이 포함된 페이지가 표시됩니다.
Maps JavaScript API 로드, 3D 지도 만들기, 돌출된 다각형 추가 등 Google Maps Platform을 사용하여 첫 번째 3D 지도를 빌드했습니다.
7. 다음 단계
이 Codelab에서는 Maps JavaScript API를 사용하여 수행할 수 있는 기본 사항을 살펴봤습니다. 다음으로, 지도에 다음과 같은 기능을 추가해 보세요.
- 관심 장소를 켜고 끌 수 있는 버튼을 추가합니다.
- 여러 장소를 오가는 경로를 보여주는 선을 추가합니다.
- 사용자가 뷰를 이동할 수 있는 위치를 제어하도록 경계 제한을 설정합니다.
- Maps JavaScript API에서 사용할 수 있는 추가 라이브러리를 확인합니다. 이러한 라이브러리를 사용하면 장소 또는 경로와 같은 추가 서비스를 사용 설정할 수 있습니다.
계속해서 웹에서 Google Maps Platform 및 3D를 사용하는 방법을 자세히 알아보려면 다음 링크를 참고하세요.