Tutorial Google Maps V3: Mengelompokkan Marker dengan Klasifikasi
Tutorial Information
| Program | Google Maps |
| Version | v3 |
| Difficulty | Standar |
| Estimated Time | 30 menit |
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.- 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.
- 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)
Tampilan setelah dilakukan perbesaran (zoom in)
0 komentar:
Posting Komentar