Tutorial Dasar Penggunaan Fusion Tables Di Google Maps

Tutorial Dasar Penggunaan Fusion Tables di Google Maps

Pada artikel kali ini saya akan membahas tutorial dasar tentang bagaimana cara menampilkan marker pada peta dengan menggunakan Fusion Tables di Google Maps. Metode ini berguna jika kamu tidak ingin repot-repot menggunakan database untuk menyimpan marker lokasi. Kamu cukup menggunakan file CSV yang kamu simpan di salah satu layanan Google yaitu Google Drive. Dengan fitur Fusion Tables ini kamu hanya perlu menampilkan data koordinat marker yang sudah disimpan sebelumnya di Google Drive tanpa harus repot-repot membuat table penyimpanan lagi.

Fusion Tables Di Google Maps # Step 1

Untuk dapat menggunakan Fusion Tables di Google Maps, kita memerlukan sebuah file CSV yang memuat data-data koordinat yang akan ditampilkan. Pada studi kasus kali ini saya akan coba menampilkan beberapa tempat yang ada di kota Bandung dengan menggunakan file CSV.

Koneksi Fusion Tables

Untuk contoh format file CSV yang sesuai, kamu dapat melihat contoh file CSV yang saya gunakan disini. Setelah itu buka kita akses Google Drive lalu klik tombol “New”  lalu pada sub menu, pilih menu “Connect more apps” seperti pada gambar dibawah ini.

Fusion Tables Di Google Maps - Connect More Apps

Kebetulan saya Google Drive saya sudah terhubung dengan Google Fusion Tables jadi pada gambar diatas Google Fusion Tables milik saya sudah muncul di Submenu. Setelah kamu klik menu tersebut maka akan muncul pop up berisi daftar aplikasi yang bisa kamu hubungkan dengan Google Drive. Pada kotak pencarian, kamu bisa mengisi dengan mengetikan “fusion tables”. Maka akan muncul seperti gambar berikut.

Fusion Tables Di Google Maps - Search Apps

Klik pada tombol “Connect”, maka secara otomatis Google Drive akan terhubung dengan Fusion Tables.

Import Data

Setelah proses koneksi selesai, maka kembali ke tombol “New” lalu buka sub menu setelah itu klik Google Fusion Tables maka akan muncul halaman untuk melakukan import file CSV untuk membuat sebuah Fusion Tables seperti gambar berikut

Fusion Tables Di Google Maps - Import File

Pada gambar diatas, kita diberi 3 pilihan untuk melakukan import file yaitu yang pertama adalah dengan melakukan upload dari PC kita, yang kedua adalah dengan melakukan import dari file CSV yang sudah kita upload di Google Drive dan yang ketiga adalah dengan membuat table kosong dan mengisinya langsung di Google Fusion Tables. Pada kasus kali ini kita akan memilih cara pertama yaitu dengan melakukan upload dari PC kita dengan file CSV yang sudah kamu download di paragraf diatas.

Setelah proses upload selesai, kamu bisa memeriksa terlebih dahulu data didalam file CSV sebelum melakukan import.

Fusion Tables Di Google Maps - Cek Data CSV

Jika data sudah benar, kamu tinggal melakukan klik tombol “Next”.  Setelah itu akan muncul halaman dimana kamu diminta untuk memberi nama table yang akan dibuat. Setelah itu kamu bisa langsung mengklik tombol “Finish”. Maka hasilnya adalah seperti ini

Fusion Tables Di Google Maps - List Data

Output di Fusion Tables

Nah, untuk memeriksa apakah titik koordinat pada diatas sudah benar saat ditampilkan di peta, kita dapat mengklik tab “Map of latitude”. Maka akan output yang muncul kurang lebih adalah seperti ini

Fusion Tables Di Google Maps - Map Display

Kamu bisa mengubah style pada peta seperti marker atau infowindow pada menu pada sidebar sebelah kiri.

Fusion Tables Di Google Maps # Step 2

Setelah berhasil membuat sebuah table pada Google Fusion Tables, maka kita tinggal membuat script untuk menampilkannya pada aplikasi peta yang akan kita buat. Pada tab “Map of latitude”, klik tanda panah maka akan muncul sebuah menu seperti gambar dibawah ini, pilih “Publish”.

Fusion Tables Di Google Maps - Publish Map

Maka akan muncul sebuah pop up  yang berisi source code embed dan juga source code HTML & Javascript. pilih “Get HTML & Javascript” untuk mengambil source code lengkapnya. Sebelumnya kita harus mengubah terlebih visibility ke Public agar peta kita dapat diakses oleh semua orang.

Fusion Tables Di Google Maps - Source Code

Copy script yang ada di textbox tersebut lalu Paste ke Text editor milik kamu. buat sebuah file berekstensi HTML lalu paste source code tersebut.

Fusion Tables Di Google Maps # Step 3

Langkah yang terakhir ini hanya penyesuaian saja agar peta yang akan kita publish dapat ditampilkan secara full screen.

Nah, selesai! Kamu bisa melihat demonya pada link berikut. Semoga bermanfaat 😀

demo

 

Berlangganan Artikel

Daftarkan email anda sekarang dan dapatkan update terbaru dari artikel saya

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Powered by Optin Forms

Tinggalkan Balasan