KML 데이터 표시

개요

이 튜토리얼에서는 Google 지도 및 사이드바에 KML 파일의 정보를 표시하는 방법을 설명합니다. 지도에서 KML 파일을 사용하는 방법에 대한 자세한 내용은 KML 레이어 가이드를 참고하세요. 사이드바에서 데이터를 보려면 아래 지도에서 마커를 클릭해 보세요.

아래 섹션에는 지도와 사이드바를 만드는 데 필요한 전체 코드가 표시되어 있습니다.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('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
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';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

시작하기

다음은 이 튜토리얼을 위한 지도 및 사이드바를 만드는 단계입니다.

  1. KML 파일 설정
  2. KMLlayer 표시
  3. 사이드바에 데이터 표시

가져올 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 요소 및 항목 교체를 사용하여 포함할 수 있습니다(자세한 내용은 아래 참고). 둘 다 지형지물의 infoWindowHtml 속성으로 액세스할 수 있습니다.

ExtendedData 요소

이 튜토리얼의 KML 파일에는 ExtendedData 요소에 지형지물 정보가 포함되어 있습니다. 이 정보를 지형지물의 설명으로 가져오려면 기본적으로 BalloonStyle 태그의 변수인 항목 대체를 사용하세요.

아래 표에는 이 섹션의 코드가 설명되어 있습니다.

코드 및 설명 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

KML 파일에는 모든 위치표시에 적용되는 단일 Style 요소가 있습니다.
이 Style 요소는 #[video]의 값을 BalloonStyle의 텍스트 요소에 할당합니다.
$[x] 형식은 KML 파서에 video라는 Data 요소를 찾아서 풍선 텍스트로 사용하도록 지시합니다.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

각 Placemark에는 Data 요소가 포함된 ExtendedData 요소가 포함되어 있습니다. 각 Placemark에는 이름 속성이 video인 단일 Data 요소가 있습니다.
이 튜토리얼의 파일은 삽입된 YouTube 동영상을 각 위치표시의 풍선 텍스트 값으로 사용합니다.

항목 대체에 대한 자세한 내용은 KML 문서의 맞춤 데이터 추가 장을 참고하세요.

KMLLayer 표시

지도 초기화

다음 표에서는 이 섹션의 코드를 설명합니다.

코드 및 설명 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

지도에 KML을 표시하려면 먼저 지도를 만들어야 합니다.
이 코드는 새 Google 지도 객체를 만들고 중심 및 확대/축소할 위치를 알려주고 지도를 div에 연결합니다.
Google 지도 만들기의 기본사항에 관한 자세한 내용은 웹사이트에 Google 지도 추가하기 튜토리얼을 참고하세요.

KMLLayer 만들기

다음 표에서는 KMLLayer를 만드는 코드를 설명합니다.

코드 및 설명 
var kmlLayer = new google.maps.KmlLayer();

KML을 표시할 새로운 KMLLayer 객체를 만듭니다.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

KMLLayer 생성자가 KML 파일의 URL을 설정합니다. 또한 다음을 실행하는 KMLLayer 객체의 속성도 정의합니다.
  • 레이어에 클릭 시 정보 창을 표시하지 않도록 지시합니다.
  • 레이어 콘텐츠의 경계 상자에 중심을 맞추고 확대/축소하도록 지도에 지시합니다.
  • 지도를 이전에 만든 지도 객체로 설정합니다.
Maps JavaScript API 참조 가이드에는 이 레이어에 사용할 수 있는 모든 옵션이 나열되어 있습니다.
HTML 파일을 로드하여 KML 파일 콘텐츠를 기본 지도 위에 레이어로 표시합니다. 하지만 지형지물을 클릭해도 아직은 어떤 액션도 발생하지 않습니다.

사이드바에 데이터 표시

이 섹션에서는 지도의 지형지물을 클릭할 때 사이드바에 정보 창 콘텐츠를 표시하는 설정에 대해 설명합니다. 이는 다음과 같은 작업을 통해 실행됩니다.

  • KMLLayer 지형지물의 클릭 이벤트 수신
  • 클릭된 지형지물의 데이터 가져오기
  • 이 데이터를 사이드바에 쓰기

이벤트 리스너 추가

Google 지도에서는 클릭이나 키보드 키 누름과 같은 지도의 사용자 이벤트를 수신 대기하고 이에 응답하기 위한 기능을 제공하며, 이러한 click 이벤트를 위한 리스너를 추가합니다.

아래 표에는 이 섹션의 코드가 설명되어 있습니다.

코드 및 설명 
kmlLayer.addListener('click', function(event) {});

kmlLayer.addListener 이벤트 리스너는 다음 항목에 초점을 맞춥니다.
  • 수신 대기할 이벤트의 유형. 이 튜토리얼에서는 click 이벤트입니다.
  • 이벤트가 발생할 때 호출할 함수.
개발자 가이드에서 이벤트에 대해 자세히 알아볼 수 있습니다.

사이드바에 KML 지형지물 데이터 쓰기

튜토리얼의 이 단계에서는 레이어의 지형지물에서 클릭 이벤트를 캡처했습니다. 이제 지형지물의 데이터와 정보 창 콘텐츠를 사이드바에 쓰도록 애플리케이션을 설정할 수 있습니다.

아래 표에는 이 섹션의 코드가 설명되어 있습니다.

코드 및 설명 
var content = event.featureData.infoWindowHtml;

정보 창 콘텐츠를 변수에 씁니다. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

쓸 div를 파악하고 그 안의 HTML을 지형지물의 콘텐츠로 바꿉니다. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

다음 코드 줄은 addListener 생성자 내의 함수가 됩니다.

이제 지도에서 KML 지형지물을 클릭할 때마다 사이드바가 업데이트되어 정보 창 콘텐츠가 표시됩니다.

추가 정보

KML 파일 사용에 대해 자세히 알아보세요.