Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Layanan Elevation

Ringkasan

Layanan Elevation menyediakan data elevasi untuk semua lokasi di permukaan bumi, termasuk lokasi kedalaman di dasar laut (yang akan mengembalikan nilai negatif). Jika Google tidak memiliki ukuran elevasi yang pasti untuk lokasi persis yang Anda minta, layanan ini akan menambahkan dan mengembalikan nilai rata-rata menggunakan empat lokasi terdekat.

Objek ElevationService menyediakan Anda antarmuka sederhana untuk melakukan kueri lokasi di bumi untuk data elevasi. Selain itu, Anda juga bisa meminta sampel data elevasi beserta jalur, yang memungkinkan Anda menghitung perubahan elevasi di sepanjang rute. Objek ElevationService berkomunikasi dengan Google Maps API Elevation Service yang menerima permintaan elevasi dan mengembalikan data elevasi.

Dengan layanan Elevation, Anda bisa mengembangkan aplikasi berjalan kaki dan bersepeda, aplikasi posisi seluler, atau aplikasi survei dengan resolusi rendah.

Memulai

Sebelum menggunakan layanan Elevation di Google Maps JavaScript API, terlebih dahulu pastikan Google Maps Elevation API telah diaktifkan di Google API Console, dalam proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Masuklah ke Google API Console.
  2. Klik tombol Select a project, kemudian pilih proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API dan klik Open.
  3. Dari daftar API di Dashboard, cari Google Maps Elevation API.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak dicantumkan, aktifkan:
    1. Di bagian atas laman, pilih ENABLE API untuk menampilkan tab Library. Atau, dari menu sisi kiri, pilih Library.
    2. Telusuri Google Maps Elevation API, kemudian pilih dari daftar hasil.
    3. Pilih ENABLE. Bila proses selesai, Google Maps Elevation API akan muncul dalam daftar API di Dashboard.

Kebijakan dan batas penggunaan

Kuota

Batas penggunaan berikut ini berlaku untuk layanan Elevation:

Penggunaan layanan Elevation bersama Standard Plan

  • 2.500 permintaan per hari gratis, dihitung sebagai jumlah kueri sisi-klien dan sisi-server; aktifkan penagihan untuk mengakses kuota harian lebih tinggi, yang dikenakan sebesar $0,50 USD / 1000 permintaan tambahan, hingga 100.000 permintaan per hari.
  • 512 lokasi per permintaan.
  • 50 permintaan per detik, yang dihitung sebagai gabungan jumlah kueri sisi-klien dan sisi-server.

Penggunaan layanan Elevation bersama Premium Plan

  • Kuota gratis harian bersama sebesar 100.000 permintaan per 24 jam; permintaan tambahan berlaku pada pembelian tahunan untuk Kredit Maps API.
  • 512 lokasi per permintaan.
  • Tanpa batas permintaan sisi-klien per detik, per proyek. Perhatikan, API sisi-server dibatasi 50 permintaan per detik.

Batas kecepatan berlaku per sesi pengguna, berapa pun banyaknya pengguna yang berbagi proyek yang sama.

Batas kecepatan per-sesi mencegah penggunaan layanan sisi-klien untuk permintaan batch. Jika Anda ingin menghitung elevasi lokasi statis yang dikenal, lihat dokumentasi layanan web Google Maps Elevation API.

Kebijakan

Penggunaan layanan Elevation harus sesuai dengan kebijakan yang dijelaskan untuk Google Maps Elevation API.

Permintaan Elevasi

Mengakses layanan Elevation bersifat asinkron, karena Google Maps API harus melakukan panggilan ke server eksternal. Karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan diselesaikan. Metode callback ini harus memproses hasil. Perhatikan, layanan Elevation mengembalikan kode status (ElevationStatus) dan larik objek ElevationResult yang terpisah.

ElevationService menangani dua tipe permintaan:

  • Permintaan lokasi terpisah yang berlainan menggunakan metode getElevationForLocations(), yang menerima daftar satu atau beberapa lokasi menggunakan objek LocationElevationRequest.
  • Permintaan elevasi pada serangkaian titik yang terhubung sepanjang jalan menggunakan metode getElevationAlongPath(), yang meneruskan sekumpulan verteks jalur yang disusun dalam objek PathElevationRequest. Saat meminta elevasi sepanjang jalur, Anda juga harus meneruskan parameter yang menunjukkan berapa banyak sampel yang ingin diambil sepanjang jalur itu.

Setiap metode juga harus meneruskan metode callback untuk menangani objek ElevationResult dan ElevationStatus yang dikembalikan.

Permintaan Elevasi Lokasi

Literal objek LocationElevationRequest berisi bidang-bidang berikut:

{
  locations[]: LatLng
}

locations (diperlukan) mendefinisikan lokasi di atas bumi yang menjadi titik pengembalian data elevasi. Parameter ini mengambil larik LatLng.

Anda bisa meneruskan beberapa koordinat dalam sebuah larik, asalkan tidak melebihi kuota layanan. Perhatikan, saat meneruskan beberapa koordinat, akurasi data yang dikembalikan mungkin memiliki resolusi lebih rendah daripada saat meminta data untuk satu koordinat.

Sampel Permintaan Elevasi Jalur

Literal objek PathElevationRequest berisi bidang-bidang berikut:

{
  path[]: LatLng,
  samples: Number
}

Bidang-bidang ini dijelaskan di bawah:

  • path (diperlukan) mendefinisikan jalur di atas bumi yang akan digunakan untuk mengembalikan data elevasi. Parameter path mendefinisikan dua atau beberapa pasang {latitude,longitude} yang disusun menggunakan larik dua atau beberapa objek LatLng.
  • samples (diperlukan) menetapkan jumlah titik sampel di sepanjang jalur yang akan digunakan untuk mengembalikan data elevasi. Parameter samples membagi path yang diberikan ke dalam susunan titik-titik yang berjarak sama di sepanjang jalur.

Sebagaimana permintaan posisi, parameter path menetapkan satu set nilai garis lintang dan garis bujur. Akan tetapi, tidak seperti permintaan posisi, path menetapkan serangkaian verteks berurutan. Daripada mengembalikan data elevasi di verteks, permintaan jalur mengambil sampel sepanjang jalur, dengan masing-masing sampel berjarak sama antara satu sama lain (termasuk titik akhir).

Respons Elevasi

Untuk setiap permintaan yang valid, layanan Elevation akan mengembalikan satu set objek ElevationResult bersama objek ElevationStatus ke callback yang didefinisikan.

Status Elevasi

Setiap permintaan elevasi mengembalikan kode ElevationStatus dalam fungsi callback. Kode status ini akan berisi salah satu nilai berikut:

  • OK menunjukkan permintaan layanan berhasil
  • INVALID_REQUEST menunjukkan permintaan layanan memiliki format yang salah
  • OVER_QUERY_LIMIT menunjukkan pemohon telah melebihi kuota
  • REQUEST_DENIED menunjukkan layanan tidak memenuhi permintaan, mungkin karena parameter tidak valid
  • UNKNOWN_ERROR menunjukkan kesalahan yang tidak diketahui

Anda harus memeriksa apakah callback berhasil dengan memeriksa bahwa kode status ini OK.

Hasil Elevasi

Bila berhasil, argumen results fungsi callback Anda akan berisi satu set objek ElevationResult. Objek ini berisi elemen berikut:

  • Elemen location (berisi objek LatLng) dari posisi penghitungan data elevasi. Perhatikan, untuk permintaan jalur, kumpulan elemen location akan berisi titik sampel sepanjang jalur tersebut.
  • Sebuah elemen elevation menunjukkan ketinggian lokasi dalam meter.
  • Nilai resolution, menunjukkan jarak maksimum antar titik data yang digunakan untuk interpolasi elevasi, dalam meter. Properti ini tidak akan ada jika resolusi tidak diketahui. Perhatikan, data elevasi menjadi lebih kasar (nilai resolution lebih besar) bila meneruskan beberapa titik sekaligus. Untuk memperoleh nilai elevasi yang paling akurat bagi sebuah titik, maka harus dibuat kueri terpisah.

Contoh Elevasi

Kode berikut menerjemahkan sebuah klik pada peta menjadi permintaan elevasi yang menggunakan objek 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);
    }
  });
}

Tampilkan contoh (elevation-simple.html)

Contoh berikut membuat sebuah polyline yang diberi satu set koordinat dan menampilkan data elevasi sepanjang jalur itu menggunakan Google Visualization API. (Anda harus memuat API ini menggunakan Google Common Loader.) Permintaan elevasi dibuat menggunakan 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)'
  });
}

Tampilkan contoh (elevation-paths.html)

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.