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 Fusion Tables (Eksperimental)

  1. Ringkasan
  2. Batas
  3. Penyiapan Fusion Table
  4. Membangun Layer FusionTables
  5. Kueri Fusion Table
  6. Gaya Fusion Table
  7. Peta Panas Fusion Table

Catatan: Layer Fusion Tables adalah Eksperimental.

Layer Fusion Tables merender data yang dimuat dalam Google Fusion Tables.

Ringkasan

Google Maps JavaScript API memungkinkan Anda merender data yang dimuat dalam Google Fusion Tables sebagai layer pada peta dengan menggunakan objek FusionTablesLayer. Google Fusion Table adalah tabel database yang setiap barisnya berisi data tentang fitur tertentu; untuk data geografis, setiap baris dalam Google Fusion Table selain berisi data lokasi, juga menyimpan informasi posisi fitur. FusionTablesLayer menyediakan sebuah antarmuka ke Fusion Tables dan mendukung rendering otomatis atas data lokasi ini, dengan menyediakan overlay yang bisa diklik yang menampilkan data tambahan pada fitur ini.

Contoh Fusion Table yang menampilkan data geografis, ditampilkan di bawah ini:

Batas

Anda bisa menggunakan Google Maps JavaScript API untuk menambahkan hingga lima layer Fusion Tables ke sebuah peta, salah satunya bisa ditata hingga dengan lima aturan penataan gaya.

Sebagai tambahan:

  • Hanya 100.000 baris data pertama dalam tabel yang dipetakan atau disertakan dalam hasil kueri.
  • Kueri dengan predikat spasial hanya mengembalikan data dari dalam 100.000 baris pertama. Karena itu, jika Anda menerapkan filter pada tabel yang sangat besar dan filter tersebut mencocokkan data dalam baris setelah 100K pertama, baris itu tidak akan ditampilkan.
  • Saat mengimpor atau memasukkan data, ingat:
    • Ukuran total data yang dikirim dalam satu panggilan API tidak boleh melebihi 1 MB.
    • Sebuah sel data di Fusion Tables mendukung maksimum 1 juta karakter; kadang-kadang mungkin perlu mengurangi ketepatan koordinat atau menyederhanakan keterangan poligon atau garis.
    • Jumlah maksimum verteks yang didukung per tabel adalah 5 juta.
  • Saat melihat di peta, Anda mungkin memperhatikan:
    • Sepuluh komponen luas terbesar dari multi-geometri akan ditampilkan.
    • Bila diperkecil lagi, tabel yang berisi lebih dari 500 fitur akan menampilkan titik-titik (bukan garis atau poligon).

Penyiapan Fusion Table

Fusion Table adalah tabel data yang menyediakan dukungan data geografis bawaan. Untuk informasi selengkapnya, lihat Tentang Fusion Tables. Agar layer Fusion Tables bisa menampilkan data dalam API pada peta Google, tabel harus memenuhi kriteria berikut:

  • Tabel harus digunakan bersama sebagai Public atau sebagai Unlisted.
  • Tabel harus memiliki satu atau beberapa kolom yang diekspos sebagai Location. Dalam antarmuka web Fusion Tables, pilih Edit > Modify Columns dan pilih kolom(-kolom) yang diinginkan.

Kolom Location harus mengikuti persyaratan format di bawah ini.

  • Koordinat garis lintang/garis bujur bisa dimasukkan dalam satu kolom, dipisah dengan koma (garis lintang,garis bujur), atau bisa dibagi ke dalam dua kolom (satu kolom untuk garis lintang, dan satu kolom untuk garis bujur). Lihat dokumentasi Fusion Tables untuk informasi selengkapnya.
  • Alamat harus di-geocode terlebih dahulu. Dalam antarmuka web Fusion Tables, pilih File > Geocode.
  • Data geometri KML seperti titik, garis, dan poligon telah didukung.

Membangun Layer FusionTables

Konstruktor FusionTablesLayer akan membuat layer dari Fusion Table publik menggunakan Encrypted ID di tabel, yang bisa ditemukan dengan memilih File > About di Fusion Tables UI.

Untuk menambahkan layer Fusion Tables ke peta Anda, buat layer, dengan meneruskan objek query bersama yang berikut ini:

  • Properti select yang nilainya adalah nama kolom berisi informasi lokasi. Anda harus menggunakan tanda kutip pada nama kolom yang berisi spasi, kata yang sudah diperuntukkan, atau yang tidak dimulai dengan huruf.
  • Properti from yang nilainya adalah salah satu Encrypted ID.

Kemudian, setel map layer ke objek Map Anda, seperti pada overlay lainnya.

Catatan: Versi lama Google Maps JavaScript API mereferensikan Fusion Table melalui Numeric ID-nya. Walaupun metode ini tetap bekerja, Encrypted ID lebih diutamakan.

Contoh berikut menampilkan kasus pembunuhan di Chicago pada tahun 2009 dengan menggunakan Fusion Table publik:

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}
<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'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Tampilkan contoh Fusion Table

Kueri Fusion Table

Fusion Tables juga memungkinkan Anda menerapkan kueri andal yang bisa membatasi rangkaian hasil untuk kriteria yang ditetapkan. Kueri ditetapkan menggunakan parameter query dari FusionTablesLayerOptions:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

dalam hal ini locationColumn adalah kolom geocode yang sudah ada bertipe Location. Anda harus menggunakan tanda kutip pada nama kolom dalam bidang select atau where yang berisi spasi, kata yang sudah diperuntukkan, atau yang tidak dimulai dengan huruf.

Operator penelusuran yang didukung tercantum dalam dokumentasi Fusion Tables.

Contoh berikut menampilkan lokasi di sepanjang CTA Red Line yang memiliki penumpang pada hari kerja di atas 5000:

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}
<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'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Tampilkan contoh Fusion Table

Gaya Fusion Table

Konstruktor layer Fusion Tables juga menerima parameter styles dari FusionTablesLayerOptions, untuk memberi warna, tebal garis luar, serta opasitas pada garis dan poligon. Ikon marker juga bisa ditetapkan dari Marker peta atau Nama ikon yang didukung.

Catatan: Gaya hanya bisa diterapkan pada satu layer Fusion Tables per peta. Anda bisa menerapkan hingga lima gaya untuk layer itu.

Parameter styles menggunakan sintaks berikut:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Gaya diterapkan atas setiap penataan yang telah ditetapkan dalam antarmuka web Fusion Tables. Gaya yang diberikan pada konstruktor layer kemudian diterapkan sesuai urutan pencantumannya; fitur yang memiliki kecocokan dengan beberapa aturan akan mengambil gaya terakhir yang cocok.

Untuk membuat gaya default yang akan diterapkan ke semua fitur, buat sebuah gaya tanpa klausa where:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

Contoh berikut menampilkan:

  • Gaya default yang memberi warna hijau pada semua poligon, dengan tingkat opasitas 0,3.
  • Semua poligon dengan kolom ‘birds’ melebihi 300 akan diberi warna biru. Semuanya mempertahankan tingkat opasitas yang disetel oleh gaya default.
  • Semua poligon dengan kolom 'population' melebihi 5 akan memiliki tingkat opasitas 1,0. Nilai fillColor-nya dipertahankan.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}
<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'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Tampilkan contoh Fusion Table

Peta Panas Fusion Table

Fusion Tables juga menyediakan dukungan terbatas untuk peta panas, dengan kepadatan lokasi yang cocok digambarkan menggunakan palet warna. Peta panas saat ini menggunakan gradien merah (padat) ke hijau (jarang) untuk menunjukkan prevalensi relatif dari lokasi terkait. Anda mengaktifkan peta panas dengan menyetel parameter heatmap layer FusionTablesLayerOptions ke enabled: true.

Catatan: Peta panas Fusion Tables dirender pada server-side. Jika Anda lebih menyukai peta panas client-side, gunakan Layer Heatmap sebagai gantinya.

Contoh berikut menampilkan data gempa bumi bersejarah dengan menggunakan sebuah peta panas:

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

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}
<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'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Tampilkan contoh Fusion Table

Kirim masukan tentang...

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