개요
이 튜토리얼은 Google 지도 및 사이드바에 KML 파일 정보를 표시하는 방법을 보여줍니다. 지도에서 KML 파일을 사용하는 방법에 대한 자세한 내용은 KML 계층 가이드를 참조하세요. 사이드바에서 데이터를 보려면 아래 지도에서 마커를 클릭하세요.
아래 섹션에서는 지도와 사이드바를 만드는 데 필요한 전체 코드를 표시합니다.
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
<div id="map"></div> <div id="capture"></div>
html, body {
height: 370px;
padding: 0;
margin: 0;
}
#map {
height: 360px;
width: 300px;
overflow: hidden;
float: left;
border: thin solid #333;
}
#capture {
height: 360px;
width: 480px;
overflow: hidden;
float: left;
background-color: #ECECFB;
border: thin solid #333;
border-left: none;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
체험해 보기
코드 블록 오른쪽을 마우스로 가리켜서 코드를 복사하거나 JSFiddle에서 엽니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Click Capture Sample</title>
<style>
html, body {
height: 370px;
padding: 0;
margin: 0;
}
#map {
height: 360px;
width: 300px;
overflow: hidden;
float: left;
border: thin solid #333;
}
#capture {
height: 360px;
width: 480px;
overflow: hidden;
float: left;
background-color: #ECECFB;
border: thin solid #333;
border-left: none;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="capture"></div>
<script>
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
시작하기
다음은 이 튜토리얼에 대한 지도와 사이드바를 만드는 단계입니다.
가져올 KML 파일 설정
KML 파일은 KML 표준을 준수해야 합니다. 이 표준에 대한 자세한 내용은 Open Geospatial Consortium 웹사이트를 참조하세요. Google의 KML 문서도 언어를 설명하고 참조 및 개념적 개발자 문서를 제공합니다.
KML 파일이 없는 학습자는 다음을 수행할 수 있습니다.
-
이 튜토리얼에서는 다음 KML 파일을 사용할 수 있습니다.
https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml -
웹에서 KML 파일을 찾을 수 있습니다. Google의
filetype검색 연산자를 사용할 수 있습니다.
velodromes에 대한 검색어를 대체하거나, 검색어를 모두 생략하여 모든 KML 파일을 찾습니다.
직접 파일을 만드는 경우 이 예시의 코드는 다음을 가정합니다.
- 인터넷에서 파일을 공개적으로 호스팅했습니다. 이는 Google 서버가
콘텐츠를 찾고 검색하여 지도에 표시할 수 있도록 KML을
KMLLayer에 로드하는 모든 애플리케이션에 대한 요구사항입니다. - 파일의 위치가 암호로 보호된 페이지가 아닙니다.
- 지형지물에 정보 창 콘텐츠가 있습니다. 이 콘텐츠를
description요소에 포함하거나ExtendedData요소 및 entity replacement를 사용하여 포함할 수 있습니다(자세한 정보는 아래 참조). 둘 모두 지형지물의infoWindowHtml속성으로 액세스할 수 있습니다.
ExtendedData 요소
이 튜토리얼의 KML 파일에는 ExtendedData 요소의
지형지물 정보가 들어 있습니다. 이 정보를 지형지물 설명으로 가져오려면
기본적으로 BalloonStyle 태그의 변수인
entity replacement를 사용합니다.
아래 표는 이 섹션의 코드를 설명합니다.
| 코드 및 설명 | |
|---|---|
|
KML 파일에는 모든 placemark에 적용되는 Style 요소가 있습니다. 이 Style 요소는 #[video] 값을
BalloonStyle의 텍스트 요소에 할당합니다.$[x] 형식은 KML 파서가
video라는 이름의 Data 요소를 찾고 풍선 텍스트로 사용하도록
지시합니다. |
|
각 Placemark에는 Data 요소가 들어 있는 ExtendedData가
있습니다.
각 Placemark에는 name 속성이 video인
단일 Data 요소가 있습니다.이 튜토리얼의 파일은 삽입된 YouTube 비디오를 각 Placemark 풍선 텍스트의 값으로 사용합니다. |
엔터티 교체에 대한 자세한 내용은 KML 문서의 사용자 지정 데이터 추가 장을 참조하세요.
KMLLayer 표시
지도 초기화
아래 표는 이 섹션의 코드를 설명합니다.
| 코드 및 설명 | |
|---|---|
|
지도에 KML을 표시하려면 먼저 지도를 만들어야 합니다. 이 코드는 새 Google 지도 객체를 만들고 중심을 맞추고 확대/축소할 위치를 알려주고 div에 지도를 첨부합니다.Google 지도를 만드는 기본적인 방법에 대한 자세한 내용은 웹사이트에 Google 지도 추가 튜토리얼을 참조하세요. |
KMLLayer 만들기
아래 표는 KMLLayer를 만드는 코드를 설명합니다.
| 코드 및 설명 | |
|---|---|
|
KML을 표시할 새 KMLLayer 객체를 만듭니다. |
|
KMLLayer 생성자가 KML 파일의 URL을 설정합니다. 또한 다음을 수행하는 KMLLayer 객체의 속성을 정의합니다.
|
사이드바에 데이터 표시
이 섹션에서는 지도에서 지형지물을 클릭하면 사이드바에 정보 창 콘텐츠가 표시되는 설정에 대해 설명합니다. 이는 다음을 통해 수행합니다.
- KMLLayer 지형지물의 클릭 이벤트를 수신합니다.
- 클릭한 지형지물의 데이터를 가져옵니다.
- 해당 데이터를 사이드바에 씁니다.
이벤트 리스너 추가
Google 지도는 클릭이나 키보드 키 누름과 같은 지도상의
사용자 이벤트를 수신 및 응답하는 함수를 제공합니다. 해당
click 이벤트에 대한 리스너를 추가합니다.
아래 표는 이 섹션의 코드를 설명합니다.
| 코드 및 설명 | |
|---|---|
|
google.maps.event.addListener 이벤트 리스너는 다음 항목에
중점을 둡니다.
|
사이드바에 KML 지형지물 데이터 쓰기
이 튜토리얼의 이 단계까지 계층의 지형지물 클릭 이벤트를 학습했습니다. 이제 지형지물의 데이터 및 정보 창 콘텐츠를 사이드바에 쓰도록 애플리케이션을 설정할 수 있습니다.
아래 표는 이 섹션의 코드를 설명합니다.
| 코드 및 설명 | |
|---|---|
|
변수에 정보 창 콘텐츠를 씁니다. |
|
쓸 div를 식별하고 그 안의 HTML을 지형지물 콘텐츠로
바꿉니다.
|
|
이 코드 줄은 addListener
생성자 내에서 함수가 됩니다.
|
이제 지도에서 KML 지형지물을 클릭할 때마다 사이드바가 업데이트되어 정보 창 콘텐츠가 표시됩니다.
추가 정보
KML 파일.을 사용하는 자세한 방법을 참조하세요.
도움이 필요하시나요? 지원 페이지