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

Menampilkan KML

Ringkasan

Tutorial ini menunjukkan cara menampilkan informasi file KML pada peta Google dan bilah sisi. Untuk informasi selengkapnya tentang penggunaan file KML di peta, baca panduan tentang Layer KML. Coba klik marker pada peta di bawah ini untuk melihat data di bilah sisi.

Bagian di bawah ini menampilkan seluruh kode yang Anda butuhkan untuk membuat peta dan bilah sisi.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

/**
 * Initializes the map and calls the function that loads the KML layer.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, '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>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam 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';

      /**
       * Initializes the map and calls the function that loads the KML layer.
       */
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });
        loadKmlLayer(src, map);
      }

      /**
       * Adds a KMLLayer based on the URL passed. Clicking on a marker
       * results in the balloon content being loaded into the right-hand div.
       * @param {string} src A URL for a KML file.
       */
      function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        google.maps.event.addListener(kmlLayer, '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>

Memulai

Ini adalah tahapan untuk membuat peta dan bilah sisi untuk tutorial ini:

  1. Menyiapkan file KML
  2. Menampilkan KMLlayer
  3. Menampilkan data di bilah sisi

Menyiapkan file KML untuk diimpor

File KML Anda harus mematuhi standar KML. Untuk detail tentang standar ini, kunjungi situs web Open Geospatial Consortium. Dokumentasi KML Google juga menjelaskan bahasanya, dan berisi referensi dan dokumentasi developer konseptual.

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

  • Menggunakan file KML berikut untuk tutorial ini:

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

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

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

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

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

Elemen ExtendedData

File KML dalam tutorial ini menyertakan informasi fitur dalam sebuah elemen ExtendedData. Untuk memasukkan informasi ini ke dalam keterangan fitur, gunakan penggantian entitas yang intinya adalah sebuah variabel dalam tag BalloonStyle.

Tabel di bawah menjelaskan kode untuk bagian ini.

Kode dan keterangan 
<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 elemen Style yang diterapkan pada semua placemark.
Elemen Style ini menetapkan nilai #[video] ke elemen teks BalloonStyle.
Format $[x] memberi tahu parser KML untuk mencari elemen Data yang bernama video, dan menggunakan 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 sebuah elemen ExtendedData yang menampung elemen Data. Perhatikan bahwa setiap Placemark memiliki elemen Data tunggal dengan atribut nama video.
File untuk tutorial ini menggunakan video YouTube tersemat sebagai nilai setiap teks balon Placemark.

Anda bisa mengetahui selengkapnya tentang penggantian entitas dalam bab Menambahkan Data Khusus pada dokumentasi KML.

Menampilkan KMLLayer

Memulai peta

Tabel ini menjelaskan kode untuk bagian ini.

Kode dan keterangan 
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 dulu.
Kode ini membuat objek Peta Google baru dan memberi tahu tempat yang dipusatkan dan diperbesar dan melampirkan peta ke div.
Untuk mengetahui selengkapnya tentang dasar-dasar pembuatan Peta Google, baca tutorial Menambahkan Peta Google ke situs web Anda .

Membuat KMLLayer

Tabel ini menjelaskan kode yang membuat KMLLayer.

Kode dan keterangan 
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 menyetel URL file KML Anda. Konstruktor ini juga mendefinisikan properti untuk objek KMLLayer yang melakukan yang berikut:
  • Memberi tahu layer agar tidak menampilkan jendela info saat diklik.
  • Memberi tahu peta untuk memusatkan dan memperbesar pada kotak pembatas materi layer.
  • Menyetel peta ke objek Peta yang telah dibuat sebelumnya.
Panduan referensi Google Maps JavaScript API mencantumkan semua opsi yang tersedia untuk layer ini.
Muat file HTML Anda agar menampilkan materi file KML sebagai layer di atas peta dasar. Akan tetapi, mengeklik fitur apa pun belum akan menghasilkan tindakan.

Menampilkan data di bilah sisi

Bagian ini menjelaskan setelan yang menampilkan materi jendela info di bilah sisi saat Anda mengeklik sebuah fitur pada peta. Ini dilakukan dengan:

  • Memantau kejadian klik pada fitur KMLLayer apa pun.
  • Mengambil data fitur yang diklik.
  • Menuliskan data tersebut pada bilah sisi.

Menambahkan listener kejadian

Google Maps menyediakan fungsi untuk memantau dan merespons kejadian pengguna pada peta, seperti klik atau tekanan tombol keyboard. Ini menambahkan listener untuk kejadian click tersebut.

Tabel di bawah menjelaskan kode untuk bagian ini.

Kode dan keterangan 
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

Listener kejadian google.maps.event.addListener berfokus pada hal berikut:
  • Objek yang dipantau. Dalam tutorial ini, ini adalah objek kmlLayer.
  • Tipe kejadian yang akan dipantau. Dalam tutorial ini, ini adalah kejadian click.
  • Fungsi yang akan dipanggil saat kejadian terjadi.
Anda bisa mengetahui selengkapnya tentang kejadian di Panduan Developer.

Pada tahap tutorial ini, Anda telah merekam kejadian klik pada fitur layer. Anda sekarang bisa menyetel aplikasi untuk menuliskan data fitur dan materi jendela info ke bilah sisi.

Tabel di bawah menjelaskan kode untuk bagian ini.

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

Menuliskan materi 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 materi fitur. 
google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Baris kode ini menjadi fungsi di dalam konstruktor addListener .

Sekarang, setiap kali Anda mengeklik fitur KML pada peta, bilah sisi diperbarui untuk menampilkan materi jendela info.

Informasi selengkapnya

Baca selengkapnya tentang menggunakan file KML.

Kirim masukan tentang...

Laman ini
Masukan dokumentasi
Google Maps JavaScript API
Google Maps JavaScript API
Masukan produk
Butuh bantuan? Kunjungi laman dukungan kami.