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

Pengelompokan Marker

Ringkasan

Tutorial ini menampilkan cara menggunakan cluster marker untuk menampilkan sejumlah besar marker pada peta. Anda bisa menggunakan pustaka MarkerClusterer yang dikombinasikan dengan Google Maps JavaScript API untuk menggabungkan marker yang jaraknya dekat ke dalam cluster, dan menyederhanakan tampilkan marker pada peta.

Untuk melihat cara kerja pengelompokan marker, lihat peta di bawah ini.

Angka pada cluster menunjukkan berapa banyak marker yang ada di dalamnya. Perhatikan bahwa saat Anda memperbesar lokasi cluster mana pun, jumlah cluster semakin sedikit dan Anda mulai melihat masing-masing marker pada peta. Memperkecil peta akan menggabungkan marker ke dalam cluster lagi.

Contoh berikut menampilkan keseluruhan kode yang Anda perlukan untuk membuat peta ini.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></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>Marker Clustering</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Sebagai ilustrasi sederhana, tutorial ini menambahkan serangkaian marker ke peta menggunakan larik locations. Anda bisa menggunakan sumber lain untuk mendapatkan marker untuk peta Anda. Untuk informasi selengkapnya, baca panduan tentang membuat marker.

Memahami pengelompokan marker

Pustaka MarkerClusterer menggunakan teknik pengelompokan atau clustering berbasis grid yang membagi peta ke dalam kotak berukuran tertentu (ukuran akan berubah pada setiap tingkat zoom), dan mengelompokkan marker ke dalam setiap grid kotak. Ini akan membuat cluster di marker tertentu dan menambahkan marker yang berada dalam garis batasnya ke cluster. Ini mengulangi proses ini sampai semua marker dialokasikan ke marker cluster berbasis grid terdekat berdasarkan tingkat zoom peta.

Jika marker berada dalam batas lebih dari satu cluster yang ada, Maps JavaScript API akan menentukan jarak marker dari setiap cluster dan menambahkannya ke cluster terdekat.

Anda bisa menyetel opsi MarkerClusterer untuk menyesuaikan posisi cluster untuk merefleksikan jarak rata-rata antara semua marker yang berada di dalamnya. Anda juga bisa menyesuaikan MarkerClusterer untuk memodifikasi parameter lain seperti ukuran grid, ikon cluster, teks cluster, dan lainnya.

Menambahkan marker clusterer

Ikuti petunjuk berikut untuk menambahkan marker clusterer:

  1. Dapatkan pustaka pengelompokan marker dan gambar dari GitHub dan simpan ke server yang bisa diakses oleh aplikasi Anda.
    Pustaka JavaScript dan file gambar untuk MarkerClusterer tersedia di repo Google Maps di GitHub. Unduh atau salin file berikut dari GitHub ke lokasi yang bisa diakses oleh aplikasi Anda:

  2. Tambahkan pustaka pengelompokan marker ke laman Anda.

    Dalam kode untuk tutorial ini, skrip berikut menetapkan lokasi file pustaka markerclusterer.js di https://developers.google.com.

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    Ubah jalur untuk menetapkan lokasi tempat Anda telah menyimpan file yang sama.


  3. Tambahkan marker clusterer di aplikasi Anda.

    Kode berikut menambahkan marker clusterer ke peta.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    Contoh ini meneruskan larik marker ke MarkerClusterer. Ini juga menetapkan lokasi lima file gambar di parameter imagePath. Ganti ini dengan jalur ke lokasi tempat Anda menyimpan file gambar yang sama.

Ketahui selengkapnya

Anda bisa menampilkan contoh yang lebih kompleks tentang pengelompokan marker di repo Google Maps di GitHub.

Kirim masukan tentang...

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