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

Layer Data

Layer Data Google Maps menyediakan kontainer untuk data geospasial arbitrer. Anda bisa menggunakan layer Data untuk menyimpan data khusus, atau untuk menampilkan data GeoJSON pada peta Google.

Ringkasan

Lihat video DevBytes ini untuk mengetahui selengkapnya tentang Layer Data.

Dengan Google Maps JavaScript API Anda bisa menandai sebuah peta dengan berbagai overlay, seperti marker, polyline, poligon, dll. Setiap anotasinya menggabungkan informasi penataan gaya dengan data lokasi. Kelas google.maps.Data adalah kontainer untuk data geospasial arbitrary. Sebagai ganti menambahkan overlay, Anda bisa menggunakan layer Data untuk menambahkan data geografis arbitrary pada peta. Jika data itu berisi informasi geometri, seperti titik, garis atau poligon, API akan merendernya secara default sebagai marker, polyline dan poligon. Anda bisa memberi gaya fitur ini seperti yang Anda lakukan terhadap overlay normal, atau menerapkan aturan gaya berdasarkan properti lain yang dimuat dalam kumpulan data Anda.

Kelas google.maps.Data memungkinkan Anda untuk:

  • Menggambar poligon pada peta Anda.
  • Menambahkan data GeoJSON ke peta Anda.
    GeoJSON adalah standar untuk data geospasial pada internet. Kelas Data mengikuti struktur GeoJSON dalam penggambaran data dan memudahkan untuk menampilkan data GeoJSON. Gunakan metode loadGeoJson() untuk dengan mudah mengimpor data GeoJSON dan menampilkan poin, line-string dan poligon.
  • Gunakan google.maps.Data untuk model data arbitrary.
    Sebagian besar entitas dunia nyata memiliki properti lain yang berhubungan dengan mereka. Misalnya, toko mempunyai jam buka, jalan mempunyai kecepatan lalu lintas, dan setiap rombongan Girl Guide memiliki cookie menjual rumput. Dengan google.maps.Data, Anda dapat membuat model properti ini, dan menata data Anda dengan sesuai.
  • Pilih bagaimana data Anda direpresentasikan, dan ubah pemikiran Anda secara cepat.
    Layer Data dapat digunakan untuk membuat keputusan tentang visualisasi dan interaksi data Anda. Misalnya, saat melihat peta toserba, Anda bisa memilih untuk menampilkan toko yang menjual tiket angkutan umum saja.

Gambar sebuah poligon

Kelas Data.Polygon menangani pelilitan poligon untuk Anda. Anda bisa meneruskan sebuah larik yang berisi satu atau beberapa cincin linier padanya, yang didefinisikan sebagai koordinat lintang/bujur. Cincin linier pertama mendefinisikan batas luar poligon. Jika Anda meneruskan lebih dari satu cincin linier, maka cincin linier kedua dan seterusnya akan digunakan untuk mendefinisikan jalur dalam (lubang) di poligon.

Contoh berikut akan membuat poligon persegi panjang dengan dua lubang di dalamnya:

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<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>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

Tampilkan contoh.

Memuat GeoJSON

GeoJSON adalah standar umum untuk berbagi data geospasial di internet. Karena ringan dan bisa dibaca orang, maka cocok untuk berbagi dan berkolaborasi. Dengan layer Data, Anda bisa menambahkan data GeoJSON ke peta Google hanya dengan satu baris kode.

map.data.loadGeoJson('google.json');

Setiap peta memiliki objek map.data, yang berfungsi sebagai layer data untuk data geospasial arbitrary, termasuk GeoJSON. Anda bisa memuat dan menampilkan file GeoJSON dengan memanggil metode loadGeoJSON() objek data. Contoh di bawah ini menampilkan cara menambahkan peta dan memuat data GeoJSON eksternal.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<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>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

Tampilkan Contoh.

Contoh GeoJSON

Sebagian besar contoh pada laman ini menggunakan file GeoJSON umum. File ini mendefinisikan enam karakter dalam 'Google' sebagai poligon di atas Australia. Silakan menyalin atau memodifikasi file ini bila Anda menguji layer Data.

Catatan: Untuk memuat file json dari domain lain, domain tersebut harus telah mengaktifkan Cross-origin resource sharing.

Teks lengkap file tersebut bisa dilihat di bawah ini dengan memperbesar panah kecil di sebelah kata google.json.

Menata Data GeoJSON

Gunakan metode Data.setStyle() untuk menetapkan cara menampilkan data Anda. Metode setStyle() mengambil literal objek StyleOptions, maupun fungsi yang menghitung gaya untuk setiap fitur.

Aturan gaya sederhana

Cara paling sederhana untuk menata fitur adalah meneruskan literal objek StyleOptions ke setStyle(). Ini akan menetapkan gaya tunggal untuk setiap fitur dalam kumpulan Anda. Perhatikan, setiap tipe fitur hanya bisa merender subset opsi yang tersedia. Ini berarti bahwa bisa saja menggabung gaya untuk tipe fitur berbeda dalam literal objek tunggal. Misalnya, cuplikan di bawah ini menyetel icon khusus, yang hanya memengaruhi geometri titik, maupun fillColor, yang hanya memengaruhi poligon.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Informasi selengkapnya mengenai kombinasi gaya/fitur yang valid bisa ditemukan di Opsi Gaya.

Di bawah ini adalah contoh setelan garis luar dan warna pengisi untuk beberapa fitur dengan menggunakan literal objek StyleOptions. Perhatikan, setiap poligon diberi gaya yang sama.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Tampilkan contoh

Aturan gaya deklaratif

Jika ingin memperbarui gaya sejumlah besar overlay, seperti marker atau polyline, biasanya Anda harus mengulanginya di setiap overlay pada peta dan menyetel gayanya masing-masing. Dengan layer Data, Anda bisa menetapkan aturan secara deklaratif dan akan diterapkan ke seluruh kumpulan data Anda. Bila data, atau aturan, diperbarui, gaya secara otomatis akan diterapkan ke setiap fitur. Anda bisa menggunakan properti fitur untuk menyesuaikan gayanya.

Misalnya, kode di bawah ini menyetel warna setiap karakter di google.json kita dengan memeriksa posisinya dalam kumpulan karakter ASCII. Dalam hal ini kita telah mengenkode posisi karakter bersama data kita.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Membuang gaya

Jika Anda ingin membuang gaya yang diterapkan, teruskan sebuah literal objek kosong ke metode setStyles().

// Remove custom styles.
map.data.setStyle({});

Ini akan membuang setiap gaya khusus yang sudah Anda tetapkan, dan fitur akan dirender menggunakan gaya default. Jika Anda tidak ingin lagi merender fitur, setel properti visible dari StyleOptions ke false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Mengesampingkan gaya default

Aturan gaya biasanya diterapkan pada setiap fitur di layer Data. Akan tetapi, ada kalanya Anda ingin menerapkan aturan gaya khusus pada fitur tertentu. Misalnya, sebagai cara untuk menyorot fitur saat diklik.

Untuk menerapkan aturan gaya khusus, gunakan metode overrideStyle(). Setiap properti yang Anda ubah dengan metode overrideStyle() akan diterapkan sebagai tambahan untuk gaya global yang sudah ditetapkan dalam setStyle(). Misalnya, kode di bawah ini akan mengubah warna pengisi poligon saat diklik, namun tidak akan menyetel gaya lainnya.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Panggil metode revertStyles() untuk membuang semua pengambilalihan gaya.

Opsi gaya

Opsi yang tersedia untuk gaya setiap fitur bergantung pada tipe fitur. Misalnya, fillColor hanya akan merender pada geometri poligon, sedangkan icon hanya akan muncul pada geometri titik. Informasi selengkapnya tersedia dalam dokumentasi referensi untuk StyleOptions.

Tersedia pada semua geometri

  • clickable: Jika true, fitur akan menerima kejadian mouse dan sentuhan
  • visible: Jika true, fitur akan terlihat.
  • zIndex: Semua fitur ditampilkan pada peta berdasarkan urutan zIndex, dengan nilai yang lebih tinggi akan ditampilkan di depan fitur yang nilainya lebih rendah. Marker selalu ditampilkan di depan line-string dan poligon.

Tersedia di geometri titik

  • cursor: Kursor mouse yang akan ditampilkan mengambang.
  • icon: Ikon yang akan ditampilkan untuk geometri titik.
  • shape: Mendefinisikan peta gambar yang digunakan untuk deteksi klik mouse.
  • title: Teks rollover.

Tersedia pada geometri baris

  • strokeColor: Warna garis luar. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai.
  • strokeOpacity: Opasitas garis luar antara 0,0 dan 1,0.
  • strokeWeight: Lebar garis luar dalam piksel.

Tersedia pada geometri poligon

  • fillColor: Warna pengisi. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai.
  • fillOpacity: Opasitas pengisi antara 0.0 dan 1.0.
  • strokeColor: Warna garis luar. Semua warna CSS3 didukung, kecuali tambahan warna yang dinamai.
  • strokeOpacity: Opasitas garis luar antara 0,0 dan 1,0.
  • strokeWeight: Lebar garis luar dalam piksel.

Menambahkan Event Handler

Fitur merespons kejadian, seperti mouseup atau mousedown. Anda bisa menambahkan event listener untuk memungkinkan pengguna berinteraksi dengan data di peta. Dalam contoh di bawah ini, kita menambahkan kejadian mouseover, yang menampilkan informasi tentang fitur di bawah kursor mouse.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Kejadian layer data

Kejadian berikut umum untuk semua fitur, apa pun tipe geometrinya:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Informasi selengkapnya tentang berbagai kejadian ini bisa ditemukan dalam dokumentasi referensi untuk kelas google.maps.data.

Mengubah Penampilan Secara Dinamis

Anda bisa menyetel gaya layer Data dengan meneruskan sebuah fungsi yang menghitung gaya setiap fitur ke metode google.maps.data.setStyle(). Fungsi ini akan dipanggil setiap kali properti fitur diperbarui.

Dalam contoh di bawah ini, kita menambahkan event listener untuk kejadian click yang memperbarui properti isColorful fitur. Gaya fitur diperbarui untuk menerapkan perubahan begitu properti telah disetel.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

Tampilkan contoh

Kirim masukan tentang...

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