My favorites | 한국어 | Sign in

Google 어스 API 개발자 가이드

Google 어스 API의 개발자 도움말에 오신 것을 환영합니다. Google 어스 플러그인 및 API를 사용하면 Google 어스의 전체 기능과 3D 렌더링 기능을 웹페이지에 삽입할 수 있습니다. Google 지도의 2D 버전에서처럼 3D 버전에서도 마커와 선을 그릴 수 있습니다.

이 API는 새로운 기능이므로 버그가 있거나 도움말의 내용이 정확하지 않을 수 있습니다. 부족한 부분을 보완하는 동안 양해해 주시기 바랍니다. Google 어스 API 개발자 포럼에 가입하여 피드백을 제공하고 API에 대해 토론해 보세요.

목차

  1. 대상
  2. 플러그인 설치
  3. Google 어스 API 소개
  4. Google 어스를 웹페이지에 삽입
  5. 문제해결
  6. 추가 리소스

대상

이 도움말은 자바스크립트 프로그래밍 및 개체 지향 프로그래밍 개념에 친숙한 사용자를 위한 것입니다. Google 어스 API는 많은 KML 요소를 기반으로 하므로 Google 어스 KML 도움말도 참조해야 합니다.

Google 어스 플러그인 API에 있는 예

이 도움말에 있는 대부분의 예는 전체 HTML 파일이 아니라 관련된 자바스크립트 코드만 보여줍니다. 자바스크립트 코드를 자신의 기본 HTML 파일에 삽입하거나 http://www.google.com/earth/plugin/examples/samples/index.html에서 온라인으로 여러 예를 확인해 볼 수 있습니다.

Google 어스 플러그인 API 소개

Google 어스 플러그인 API를 단독으로 사용하거나 Google 지도 API와 함께 사용할 수 있습니다. 이미 웹페이지에 Google 지도를 삽입한 경우에는 사용자에게 Google 지도 또는 Google 어스 브라우저에서 콘텐츠를 볼 수 있는 옵션을 제공하여 기능을 향상시킬 수 있습니다. 이를 동일한 웹페이지에서 수행할 수 있습니다. 예를 들어, Google 지도 웹페이지는 정보를 2D로 표시합니다. Google 어스 플러그인을 통합하면 선택에 따라 정보를 3D로 표시하면서 지형, 외형 및 기타 Google 어스의 여러 다른 기능을 볼 수 있습니다.

플러그인 설치

Google 어스 플러그인 API를 설치하기 전에 응용프로그램이 관련 플랫폼에서 잘 작동할 수 있도록 다음 프로그래밍 참고 사항을 읽어보세요.

참고: 이 Google 어스 플러그인 버전은 Microsoft Windows 2000, XP 및 Vista 운영 체제에서만 작동합니다. 이후 릴리스에서는 다른 운영 체제도 지원할 예정입니다.

Google 어스 플러그인은 현재 Microsoft Windows 운영 체제에서 다음 웹 브라우저를 지원합니다.

  • IE 6.0+
  • IE 7.0+
  • Firefox 3.0x, 2.x 또는 2.0x
  • Netscape 7.1+
  • Mozilla 1.4+
  • Flock 1.0+

Google 어스 플러그인을 설치하려면 다음과 같이 하세요.

  1. Google 지도 API 키에 가입합니다.
  2. Google 어스 플러그인 설치 프로그램을 다운로드하고 실행합니다.

Google 어스 플러그인 제거

Google 어스 플러그인을 제거하려면 시작 메뉴에서 Google 어스 플러그인을 선택한 다음 제거를 선택합니다.

Samples.html 사용

http://www.google.com/earth/plugin/examples/samples/index.htmlSamples.html 파일에는 여러 가지 유용한 자바스크립트 예가 들어 있습니다. 자바스크립트 코드를 보고 웹페이지에서 이 코드를 실행할 수 있습니다. Google 어스 브라우저에서 페이지의 변경 사항을 즉시 볼 수 있습니다. 이 페이지를 사용하여 자바스크립트 코드를 테스트합니다.

웹페이지에 Google 어스 삽입

Google 어스 플러그인에는 여러 샘플 파일 및 시작하는 데 사용할 수 있는 템플릿이 포함되어 있습니다. 다음 예에서는 웹페이지에 Google 어스 브라우저를 삽입하는 데 사용되는 HTML 및 자바스크립트에 대해 설명합니다. 응용프로그램을 만들 때 이 코드를 시작점으로 사용합니다.

<html>
<head>
  <title>Google</title>
  <!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
  <script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>
  <script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99");  // For JS geocoder

var ge = null;
var geocoder;


function init() {
  geocoder = new GClientGeocoder();
  google.earth.createInstance("map3d", initCB, failureCB);
}

function initCB(object) {
  ge = object;
  ge.getWindow().setVisibility(true);
}

function failureCB(object) {
  alert('load failed');
}

function submitLocation() {
  var address = document.getElementById('address').value;
  geocoder.getLatLng(
    address, 
    function(point) {
      if (point && ge != null) {
        var la = ge.createLookAt('');     
        la.set(point.y, point.x, 100, ge.ALTITUDE_RELATIVE_TO_GROUND, 
               0, 0, 4000);
        ge.getView().setAbstractView(la);
      }
    }
  );
}

  </script>
</head>
<body onload='init()' id='body'>
  <div>
    <form name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
      <input type=text size=60 id='address'></input>
      <input type=submit value='Go to location'>
    </form>
  </div>

  <div id='map3d_container' style='border: 1px solid silver; height: 500px;'>

    <div id='map3d' style='height: 100%;'></div>
  </div>
</body>
</html>

문제해결

코드가 작동하지 않는 경우에는 다음 방법들이 문제를 해결하는 데 도움이 됩니다.

  • API 키가 올바른지 확인합니다.
  • 철자가 올바른지 확인합니다. 자바스크립트는 대소문자를 구분하는 언어임을 기억하세요.
  • 자바스크립트 디버거를 사용합니다. Firefox에서는 자바스크립트 콘솔, Venkman Debugger 또는 Firebug 추가 기능을 사용할 수 있습니다. IE에서는 Microsoft Script Debugger를 사용할 수 있습니다. 몇 가지 스크린캐스트를 통해 다양한 디버깅 도구를 사용하는 방법을 알 수 있습니다.
  • 개발자 포럼을 검색합니다. 질문에 답변이 되는 게시물을 찾을 수 없는 경우 문제를 보여주는 웹페이지에 대한 링크를 포함하여 질문을 그룹에 게시하세요.
  • 자세한 개발자 리소스에 대해서는 추가 리소스를 참조하세요.

추가 리소스

Google 어스, KML 또는 Google 지도에 대해 자세한 정보가 필요하면 다음을 참조하세요.