모든 준비를 마쳤습니다!

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

Google Maps JavaScript API 활성화

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

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

고도 서비스

개요

고도 서비스는 지표면의 위치에 대한 고도 데이터를 제공하며, 여기에는 해저 바닥의 깊이가 포함됩니다(이 경우 음수 값 반환). 요청하는 정밀한 위치에서 Google이 정확한 고도 측정값을 구할 수 없는 경우, 이 서비스는 가장 가까운 네 위치에서 보간을 수행하여 평균 값을 반환합니다.

ElevationService 객체는 고도 데이터를 구하기 위해 지구상의 위치를 쿼리할 수 있는 간단한 인터페이스를 제공합니다. 또한, 경로를 따라 샘플링된 고도 데이터를 요청할 수도 있으며, 이를 통해 경로에서 등거리 고도 변화를 계산할 수 있습니다. ElevationService 객체는 고도 요청을 수신하고 고도 데이터를 반환하는 Google Maps API 고도 서비스와 통신합니다.

고도 서비스를 사용하여 하이킹 및 자전거 애플리케이션, 모바일 위치 지정 애플리케이션 또는 저해상도 측량 애플리케이션을 개발할 수 있습니다.

시작하기

Google Maps JavaScript API에서 고도 서비스를 사용하려면 먼저 Google Maps JavaScript API에 대해 설정한 동일한 프로젝트의 Google API Console에서 Google Maps Elevation API를 활성화해야 합니다.

활성화된 API 목록을 보려면:

  1. Google API Console로 이동합니다.
  2. Select a project 버튼을 클릭한 다음 Google Maps JavaScript API에 대해 설정한 동일한 프로젝트를 선택하고 Open을 클릭합니다.
  3. Dashboard의 API 목록에서 Google Maps Elevation API를 찾습니다.
  4. 목록에 API가 표시되면 모두 완벽한 상태입니다. API가 표시되지 않으면 활성화합니다.
    1. 페이지 상단에서 ENABLE API를 선택하여 Library 탭을 표시합니다. 또는 왼쪽 메뉴에서 Library를 선택합니다.
    2. Google Maps Elevation API를 검색한 다음, 결과 목록에서 선택합니다.
    3. ENABLE을 선택합니다. 프로세스가 완료되면 Google Maps Elevation APIDashboard의 API 목록에 나타납니다.

사용 제한 및 정책

할당량

고도 서비스의 사용 제한은 다음과 같습니다.

기본 플랜으로 고도 서비스 사용

  • 클라이언트측 쿼리와 서버측 쿼리의 합계로 계산된 하루2,500개의 요청이 무료로 제공됩니다. enable billing를 통해 추가 요청 1,000개당 0.50달러가 청구되는 더 많은 일일 할당량에 액세스할 수 있습니다(일일 최대 요청: 100,000개).
  • 요청당 512개 위치.
  • 초당 50개의 요청이 허용되며, 클라이언트측과 서버측 쿼리의 합계로 계산합니다.

프리미엄 플랜으로 고도 서비스 사용

  • 24시간당 100,000개 요청의 공유 일일 무료 할당량, 연간 구매의 Maps API 크레딧에 적용되는 추가적인 요청 .
  • 요청당 512개 위치.
  • 프로젝트별로 초당 무제한개의 클라이언트측 요청. 서버측 API는 초당 50개의 요청으로 제한됩니다.

동일한 프로젝트를 공유하는 사용자 수에 상관없이, 사용자 세션당 적용되는 속도 제한입니다.

세션당 속도 제한은 일괄 요청에 대해 클라이언트측 서비스 사용을 차단합니다. 정적이고 알려진 위치의 고도를 계산하려면, Google Maps Elevation API 웹 서비스를 참조하세요.

정책

고도 서비스는 Google Maps Elevation API에 대해 설명된 정책에 따라 사용해야 합니다.

고도 요청

Google Maps API는 외부 서버를 호출해야 하므로 고도 서비스 액세스는 비동기식입니다. 그러므로 콜백 메서드를 전달하여 요청이 완료되면 실행시켜야 합니다. 이 콜백 메서드가 결과를 처리해야 합니다. 고도 서비스는 상태 코드(ElevationStatus)와 별도의 ElevationResult 객체 배열을 반환합니다.

ElevationService는 두 가지 유형의 요청을 처리합니다.

  • getElevationForLocations() 메서드를 사용하여 별도의 분산된 위치 요청. LocationElevationRequest 객체를 사용하여 하나 이상의 위치 목록을 전달합니다.
  • getElevationAlongPath() 메서드를 사용하여 경로를 따라가는 일련의 연결된 점에 대한 고도 요청. PathElevationRequest 객체 내에서 순차적인 경로 교점 집합을 전달합니다. 경로를 따라 고도를 요청할 때는 해당 경로에 얼마나 많은 샘플을 적용갈지 나타내는 매개변수도 전달해야 합니다.

각각의 메서드는 반환된 ElevationResultElevationStatus 객체를 처리할 콜백 메서드도 전달해야 합니다.

위치 고도 요청

LocationElevationRequest 객체 리터럴은 다음 필드를 포함합니다.

{
  locations[]: LatLng
}

locations(필수)는 고도 데이터를 반환하기 위한 지구상의 위치를 정의합니다. 이 매개변수는 LatLng 배열을 취합니다.

서비스 할당량을 초과하지만 않으면 배열 내에서 개수에 상관없이 좌표를 전달할 수 있습니다. 참고로, 여러 좌표를 전달할 경우에 반환되는 데이터의 정확도는 단일 좌표에 대해 데이터를 요청할 경우보다 더 낮을 수 있습니다.

샘플링된 경로 고도 요청

PathElevationRequest 객체 리터럴은 다음 필드를 포함합니다.

{
  path[]: LatLng,
  samples: Number
}

이 필드의 뜻은 다음과 같습니다.

  • path(필수)는 고도 데이터를 반환하기 위한 지구상의 경로를 정의합니다. path 매개변수는 두 개 이상의 LatLng 객체를 사용하여 두 개 이상의 순차적인 {latitude,longitude} 쌍 집합을 정의합니다.
  • samples(필수)는 고도 데이터를 반환하기 위한 경로상의 샘플 지점의 수를 지정합니다. samples 매개변수는 경로상의 동일 거리에 있는 정렬된 지점으로 해당 path를 분할합니다.

위치 요청과 마찬가지로, path 매개변수는 위도와 경도 값 집합을 지정합니다. 그러나 위치 요청과 달리, path는 순차적인 교점 집합을 지정합니다. 교점에서 고도 데이터를 반환하는 것이 아니라, 경로의 길이를 따라 경로 요청이 샘플링됩니다. 여기서 각 샘플은 서로 등거리에 있습니다(엔드포인트 포함).

고도 응답

각 유효한 요청에 대해 고도 서비스는 ElevationStatus 객체와 함께 ElevationResult 객체 집합을 정의된 콜백에 반환합니다.

고도 상태

각 고도 요청은 콜백 함수 내에서 ElevationStatus 코드를 반환합니다. 이 status 코드는 다음 값 중 하나를 포함합니다.

  • OK는 서비스 요청이 성공했음을 나타냅니다.
  • INVALID_REQUEST는 서비스 요청의 형식이 잘못되었음을 나타냅니다.
  • OVER_QUERY_LIMIT는 요청자가 할당량을 초과했음을 나타냅니다.
  • REQUEST_DENIED는 서비스가 요청을 완료하지 않았음을 나타냅니다. 매개변수가 잘못되었기 때문일 가능성이 큽니다.
  • UNKNOWN_ERROR는 알 수 없는 오류를 나타냅니다.

이 상태 코드에서 OK를 검사하여 콜백이 성공했는지 확인해야 합니다.

고도 결과

성공하면 콜백 함수의 results 인수에 ElevationResult 객체 집합이 포함됩니다. 이러한 객체는 다음 요소를 포함합니다.

  • 고도 데이터를 계산 중인 위치의 location 요소(LatLng 객체 포함). 참고로, 경로 요청의 경우에는 경로상의 샘플링된 지점이 location 요소 집합에 포함됩니다.
  • 위치의 고도를 미터 단위로 나타내는 elevation 요소.
  • 고도를 보간했던 데이터 지점 사이의 최대 거리를 미터 단위로 나타내는 resolution 값. 해상도를 알 수 없는 경우에는 이 속성이 누락됩니다. 참고로, 여러 지점을 전달하는 경우에는 고도 데이터의 정밀도가 떨어집니다(resolution 값이 더 커집니다). 특정 지점에 대해 가장 정확한 고도 값을 구하려면, 독립적으로 퀴리를 수행해야 합니다.

고도 예시

다음 코드는 LocationElevationRequest 객체를 사용하여 지도 상의 클릭을 고도 요청으로 변환합니다.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- 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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

예시 보기(elevation-simple.html).

다음 예시는 주어진 좌표 집합으로 폴리라인을 생성하고 Google Visualization API를 사용하여 경로를 따라 고도 데이터를 표시합니다. (Google Common Loader를 사용하여 이 API를 로드해야 합니다.) 고도 요청은 PathElevationRequest를 사용하여 생성됩니다.

// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}
<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://www.google.com/jsapi"></script>
 <!-- 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>
// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

예시 보기(elevation-paths.html).

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

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