Menampilkan Data KML

Ringkasan

Tutorial ini menunjukkan cara menampilkan informasi file KML pada sidebar dan peta Google. Untuk informasi selengkapnya tentang penggunaan file KML di peta, baca panduan Lapisan KML. Coba klik penanda pada peta di bawah ini untuk melihat data di sidebar.

Bagian di bawah ini menampilkan seluruh kode yang Anda perlukan untuk membuat peta dan sidebar.

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>

Cobalah sendiri

Anda dapat bereksperimen dengan kode ini di JSFiddle dengan mengklik ikon <> di sudut kanan atas jendela kode.

<!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>

Memulai

Berikut tahapan untuk membuat peta dan sidebar untuk tutorial ini:

  1. Menyiapkan file KML
  2. Menampilkan KMLLayer
  3. Menampilkan data di sidebar

Menyiapkan file KML untuk diimpor

File KML Anda harus sesuai dengan standar KML. Untuk mengetahui detail standar ini, lihat situs Open Geospatial Consortium. Dokumentasi KML Google juga menjelaskan bahasa, dan menawarkan referensi serta dokumentasi developer konseptual.

Jika Anda baru belajar dan tidak memiliki file KML, Anda dapat:

  • Menggunakan file KML berikut untuk tutorial ini:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Mencari file KML di web. Anda dapat menggunakan operator penelusuran filetype Google.

    Ganti istilah penelusuran apa pun untuk velodromes, atau hapus semua istilah untuk menemukan semua file KML.

Jika Anda membuat file sendiri, kode dalam contoh ini mengasumsikan bahwa:

  • Anda telah menghosting file di internet yang dapat diakses publik. Hal ini merupakan persyaratan untuk semua aplikasi yang memuat KML ke dalam KMLLayer, sehingga server Google dapat menemukan dan mengambil konten untuk menampilkannya di peta.
  • File tidak berada dalam halaman yang dilindungi sandi.
  • Fitur Anda memiliki konten jendela info. Anda dapat memuat konten ini di elemen description, atau menyertakannya menggunakan elemen ExtendedData dan penggantian entitas (baca di bawah untuk info selengkapnya). Keduanya dapat diakses sebagai properti infoWindowHtml fitur.

Elemen ExtendedData

File KML dalam tutorial ini menyertakan informasi fitur dalam elemen ExtendedData. Untuk memasukkan informasi ini ke dalam deskripsi fitur, gunakan penggantian entitas, yang pada dasarnya adalah variabel dalam tag BalloonStyle.

Tabel di bawah menjelaskan kode untuk bagian ini.

Kode dan deskripsi 
<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>

File KML memiliki satu elemen Style yang diterapkan ke semua penanda letak.
Elemen Style ini menetapkan nilai #[video] ke elemen teks BalloonStyle.
Format $[x] memberi tahu parser KML untuk mencari elemen Data bernama video, dan menggunakannya sebagai teks balon.		 
<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>

Setiap Placemark berisi elemen ExtendedData, yang menyimpan elemen Data. Perhatikan bahwa setiap Placemark memiliki satu elemen Data dengan atribut nama video.
File untuk tutorial ini menggunakan video YouTube yang disematkan sebagai nilai dari setiap teks balon Penanda Letak.

Anda dapat mempelajari lebih lanjut penggantian entitas di bab Menambahkan Data Kustom dalam dokumentasi KML.

Menampilkan KMLLayer

Melakukan inisialisasi peta

Tabel ini menjelaskan kode untuk bagian ini.

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

Untuk menampilkan KML pada peta, Anda perlu membuat peta terlebih dahulu.
Kode ini membuat objek Google Maps baru, memberi tahu tempat yang dipusatkan dan diperbesar, serta melampirkan peta ke div.
Untuk mempelajari lebih lanjut dasar-dasar pembuatan Google Maps, baca tutorial Menambahkan Google Maps ke situs Anda.

Membuat KMLLayer

Tabel ini menjelaskan kode yang membuat KMLLayer.

Kode dan deskripsi 
var kmlLayer = new google.maps.KmlLayer();

Membuat objek KMLLayer baru untuk menampilkan KML Anda.		 
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
});

Konstruktor KMLLayer menetapkan URL file KML Anda. Konstruktor ini juga menentukan properti untuk objek KMLLayer yang akan melakukan hal berikut:
  • Memberi tahu lapisan agar tidak menampilkan jendela info saat diklik.
  • Memberi tahu peta untuk memusatkan dan melakukan zoom ke kotak pembatas konten lapisan.
  • Menetapkan peta ke objek Peta yang dibuat sebelumnya.
Panduan referensi Maps JavaScript API mencantumkan semua opsi yang tersedia untuk lapisan ini.
Muat file HTML Anda untuk menampilkan konten file KML sebagai lapisan di atas peta dasar. Namun, mengklik fitur apa pun belum akan menghasilkan tindakan.

Menampilkan data di sidebar

Bagian ini menjelaskan setelan yang menampilkan konten jendela info di sidebar saat Anda mengklik fitur pada peta. Hal ini dilakukan dengan:

  • Memproses peristiwa klik pada fitur KMLLayer apa pun.
  • Mengambil data fitur yang diklik.
  • Menuliskan data tersebut ke sidebar.

Menambahkan pemroses peristiwa

Google Maps menyediakan fungsi untuk memproses dan merespons peristiwa pengguna di peta, seperti klik atau penekanan tombol keyboard. Metode ini menambahkan pemroses untuk peristiwa click tersebut.

Tabel di bawah menjelaskan kode untuk bagian ini.

Kode dan deskripsi 
kmlLayer.addListener('click', function(event) {});

Pemroses peristiwa kmlLayer.addListener berfokus pada hal berikut:
  • Jenis peristiwa yang akan diproses. Dalam tutorial ini, peristiwanya adalah peristiwa click.
  • Fungsi yang akan dipanggil saat peristiwa terjadi.
Anda dapat mempelajari lebih lanjut peristiwa di Panduan Developer.

Menuliskan data fitur KML ke sidebar

Pada tahap tutorial ini, Anda telah mencatat peristiwa klik pada fitur lapisan. Sekarang, Anda dapat menetapkan aplikasi untuk menuliskan data fitur dan konten jendela info ke sidebar.

Tabel di bawah menjelaskan kode untuk bagian ini.

Kode dan deskripsi 
var content = event.featureData.infoWindowHtml;

Menuliskan konten jendela info ke sebuah variabel. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Mengidentifikasi div yang menjadi target penulisan dan mengganti HTML di dalamnya dengan konten fitur. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Baris kode ini menjadi fungsi dalam konstruktor addListener.

Sekarang, setiap kali Anda mengklik fitur KML pada peta, sidebar akan diperbarui untuk menampilkan konten jendela infonya.

Informasi selengkapnya

Baca selengkapnya tentang cara menggunakan file KML.