Tutorial Google Maps V3: Mengelompokkan Marker dengan Klasifikasi

Tutorial Google Maps V3: Mengelompokkan Marker dengan Klasifikasi

Tutorial Information

ProgramGoogle Maps
Versionv3
DifficultyStandar
Estimated Time30 menit

Dalam sebuah peta digital berbasis Google Maps, seringkali peta tersebut memiliki banyak penanda (marker). Bayangkan apabila peta tersebut terdiri dari banyak titik lokasi pada…

Dalam sebuah peta digital berbasis Google Maps, seringkali peta tersebut memiliki banyak penanda (marker). Bayangkan apabila peta tersebut terdiri dari banyak titik lokasi pada suatu wilayah yang sempit dan padat. Ketika peta tersebut diperkecil (zoom out), maka akan sulit bagi kita jika ingin melihat posisi setiap lokasi tersebut secara tepat karena terhalang banyak marker. Salah satu keunikan Google Maps V3 yaitu mampu mengelompokkan atau mengklasifikasi titik-titik lokasi yang berdekatan atau terletak dalam satu kluster.

Google Maps membutuhkan library khusus (yang dinamakan Marker Manager, dapat dilihat di alamat ini) untuk mengelola banyaknya titik lokasi tersebut. Library ini diperlukan karena semakin banyak titik yang ditampilkan, maka akan menurunkan unjuk kerja Google Maps. Dengan kata lain, library tambahan tersebut menyediakan script optimisasi yang mengijinkan puluhan ribu marker terdistribusi dalam suatu wilayah.

Sebagai contoh, ketika kita ingin memetakan kota-kota dalam beberapa provinsi, klasifikasi dapat dilakukan berdasarkan pada provinsi tersebut. Secara default, peta tersebut hanya menampilkan marker provinsi. Ketika peta tersebut diperbesar, maka secara otomatis akan menampilkan kota-kota yang termasuk dalam satu provinsi yang dimaksud. Berikut ini adalah langkah-langkah untuk membuat peta dengan klasifikasi marker untuk beberapa kota di Jawa Tengah dan Jawa Barat.

  1. Mengunduh (download) terlebih dahulu library markermanager.js di alamat http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.2/. Kemudian masukkan file tersebut ke dalam satu folder dengan file index.html.
  2. Membuat sebuah file index.html yang berisi kode-kode sebagai berikut. Penjelasan baris kode dapat dilihat secara langsung dalam komentar script.

    <!DOCTYPE html>

    <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title>Klasifikasi Markers</title>

    <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

    <script type=”text/javascript” src=”markermanager.js”></script>

    <style>

    html, body {

    height: 100%;

    margin: 10px;

    }

    body {

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    font-size: small;

    background: #fff;

    }

    #map {

    width: 500px;

    height: 300px;

    border: 1px solid #000;

    }

    </style>

    <script type=”text/javascript”>

    (function() {

    window.onload = function() {

    // Membuat inisialisasi objek map

    var options = {

    zoom: 4,

    center: new google.maps.LatLng(-6.95301,110.428963),

    mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    var map = new google.maps.Map(document.getElementById(‘map’), options);

    // Inisialisasi MarkerManager

    var mgr = new MarkerManager(map);

    // Membuat array yang mengandung marker-marker provinsi

    // Jawa Tengah dan Jawa Barat

    var provinsi = [

    new google.maps.Marker({

    position: new google.maps.LatLng(-6.95301,110.428963),

    icon: ‘http://img545.imageshack.us/img545/3531/clusteru.png’

    }),

    new google.maps.Marker({

    position: new google.maps.LatLng(-6.907682,107.60828),

    icon: ‘http://img545.imageshack.us/img545/3531/clusteru.png’

    })

    ];

    // Membuat array yang mengandung marker-marker kota

    // di Provinsi Jawa Tengah dan Jawa Barat

    var kota = [

    // Semarang

    new google.maps.Marker({position: new google.maps.LatLng(-6.95301,110.428963)}),

    // Surakarta

    new google.maps.Marker({position: new google.maps.LatLng(-7.563822,110.816832)}),

    // Banyumas

    new google.maps.Marker({position: new google.maps.LatLng(-7.525022,109.298658)}),

    // Magelang

    new google.maps.Marker({position: new google.maps.LatLng(-7.476857,110.2143)}),

    // Tasikmalaya

    new google.maps.Marker({position: new google.maps.LatLng(-7.318201,108.196678)}),

    // Majalengka

    new google.maps.Marker({position: new google.maps.LatLng(-6.82758,108.226604)}),

    // Bandung

    new google.maps.Marker({position: new google.maps.LatLng(-6.907682,107.60828)})

    ];

    // Memastikan MarkerManager dipanggil sebelum digunakan

    google.maps.event.addListener(mgr, ‘loaded’, function() {

    // Marker bertipe ‘states’ akan tampak ketika level perbesaran 1-5

    mgr.addMarkers(provinsi, 1, 5);

    // Marker bertipe ‘cities’ akan tampak ketika level perbesaran 6 atau lebih

    mgr.addMarkers(kota, 6);

    // Memerintahkan MarkerManager untuk menambahkan marker ke dalam map

    mgr.refresh();

    });

    };

    })();

    </script>

    </head>

    <body>

    <center>

    <h3>Klasifikasi Markers dengan Google Maps V3</h3>

    <div id=”map”></div>

    </center>

    </body>

    </html>

    Tampilan sebelum dilakukan perbesaran (default)

    klas1

    Tampilan setelah dilakukan perbesaran (zoom in)

    klas2

Penutup

Klasifikasi banyak marker akan sangat bermanfaat ketika kita mengembangkan sebuah pemetaan terdistribusi atau persebaran titik dalam beberapa kelompok wilayah. Script dasar di atas masih bisa dimodifikasi lebih jauh lagi sesuai dengan kebutuhan, misalnya dengan memanfaatkan data koordinat dari sebuah database. Bagaimana itu bisa dilakukan? Pembaca dapat membaca tulisan ini terlebih dahulu. Semoga bermanfaat.

Tag: , , ,

6 Comments

Leave Comment
  1. hakim says:

    nice nice sangat membantu

  2. gidion says:

    mau nanya mas, kalo saya ingin mengklasifikasikan kategori tempat dalam 1 lokasi misalnya dalam 1 kota saya ingin mengkategorikan mana yg tempat makan, tempat ruang terbuka kota, toko2 pakaian, spbu2.. dlll

    itu bagaimana caranya mas?

    Trim’s

  3. Kalau seandainya markernya diganti dengan jumlah data yang dikelompokkan gimana ya mas ?

  4. pengetahuan says:

    sangat membatu banget, makasih ya

  5. RON says:

    Hmmm nice info mas, eh ya itu kan pengkelompokan. kalo misalnya filter mas, misal jika di pilih masjid yang keluar hanya lokasi yang di tandai masjid saja. itu gimana mas ?

    terimakasih sebelumnya

Write Comment

Your email will not be published. The marked label is required.