모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

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 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';

      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 defer
    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 요소 및 entity replacement를 사용하여 포함할 수 있습니다(자세한 정보는 아래 참조). 둘 모두 지형지물의 infoWindowHtml 속성으로 액세스할 수 있습니다.

ExtendedData 요소

이 튜토리얼의 KML 파일에는 ExtendedData 요소의 지형지물 정보가 들어 있습니다. 이 정보를 지형지물 설명으로 가져오려면 기본적으로 BalloonStyle 태그의 변수인 entity replacement를 사용합니다.

아래 표는 이 섹션의 코드를 설명합니다.

코드 및 설명
<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 파일에는 모든 placemark에 적용되는 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에는 name 속성이 video인 단일 Data 요소가 있습니다.
이 튜토리얼의 파일은 삽입된 YouTube 비디오를 각 Placemark 풍선 텍스트의 값으로 사용합니다.

엔터티 교체에 대한 자세한 내용은 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 객체의 속성을 정의합니다.
  • 클릭할 때 정보 창을 표시하지 말라고 계층에 지시합니다.
  • 계층 콘텐츠의 경계 상자에 중심을 맞추고 확대/축소하라고 지도에 지시합니다.
  • 지도를 이전에 만든 지도 객체로 설정합니다.
Google Maps JavaScript API 참조 가이드에 이 계층에 대해 사용 가능한 옵션이 나열되어 있습니다.
HTML 파일을 로드하여 KML 파일 콘텐츠를 기본 지도의 맨 위 계층으로 표시합니다. 그러나 지형지물을 클릭해도 아직은 어떤 액션도 발생하지 않습니다.

사이드바에 데이터 표시

이 섹션에서는 지도에서 지형지물을 클릭하면 사이드바에 정보 창 콘텐츠가 표시되는 설정에 대해 설명합니다. 이는 다음을 통해 수행합니다.

  • KMLLayer 지형지물의 클릭 이벤트를 수신합니다.
  • 클릭한 지형지물의 데이터를 가져옵니다.
  • 해당 데이터를 사이드바에 씁니다.

이벤트 리스너 추가

Google 지도는 클릭이나 키보드 키 누름과 같은 지도상의 사용자 이벤트를 수신 및 응답하는 함수를 제공합니다. 해당 click 이벤트에 대한 리스너를 추가합니다.

아래 표는 이 섹션의 코드를 설명합니다.

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

google.maps.event.addListener 이벤트 리스너는 다음 항목에 중점을 둡니다.
  • 수신할 객체. 이 튜토리얼에서 이는 kmlLayer 객체입니다.
  • 수신할 이벤트 유형. 이 튜토리얼에서 이는 click 이벤트입니다.
  • 이벤트가 발생할 때 호출할 함수.
이벤트에 대한 자세한 내용은 개발자 가이드를 참조하세요.

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

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

아래 표는 이 섹션의 코드를 설명합니다.

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

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

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

이 코드 줄은 addListener 생성자 내에서 함수가 됩니다.

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

추가 정보

KML 파일.을 사용하는 자세한 방법을 참조하세요.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.