Lalu bagaimana caranya menambahkan multiple marker pada banyak lokasi pada google maps. Tentunya kita harus mengetahui kordinat latitutde dan longtitute dari masing-masing lokasi yang akan kita buat markernya. Setelah itu baru kita lakukan perulangan untuk mengatur marker berdasarkan lokasi atau posisi yang telah ditentukan.
Gambar.1 dibawah ini menunjukkan hasil akhir (output) yang akan kita bahas dalam tutorial kali ini :
Langkah-langkah membuat multiple marker Google Map
1. Script untuk terhubung ke server Google MapsKode dibawah ini berfungsi memanggil server google maps, dimana pada bagian sensornya diset false yang bertujuan untuk lokasi petanya akan dicreate sendiri.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>2. Mendefinisikan posisi lokasi
Dalam tutorial ini kita akan menambahkan marker untuk lima lokasi, maka sudah barang tentu kita sudah mempersiapkan titik kordinat untuk lima lokasi tersebut. Untuk mengetahui titik kordinatnya yang terdiri latitude dan longtitude, silahkan buka google maps lalu klik pada bagian yang akan dibuat marker maka kita akan dapatkan titik kordinatnya.
Setelah mendapatkan titik kordinatnya, definisikan lima lokasi tersebut seperti kode dibawah ini :
// Menentukan lokasi berdasarkan latitude dan longitude
var locations = [
['<h4>Ibukota Provinsi Aceh</h4>', 5.550176, 95.319263],
['<h4>Ibukota Kab.Aceh Jaya</h4>', 4.727890, 95.601373],
['<h4>Ibukota Abdya</h4>', 3.818570, 96.831841],
['<h4>Ibukota Kotamadya Langsa</h4>', 4.476020, 97.952447],
['<h4>Ibukota Kotamadya Sabang</h4>', 5.909284, 95.304742]
];3. Mengatur aremeter untuk object options pada tampilan Google Maps
Disini kita memilih tipe peta ROADMAPS. Jadi pengaturan object options pada tampilan google maps memiliki fungsi yang salah satunya adalah menentukan jenis peta yang akan digunakan. Masih banyak item-item lainnya yang dapat diatur dalam object option ini.
var options = {
zoom: 8,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP
}4. Pembuatan petanya
Daalam membuat peta pada langkah empat ini, petanya sudah dilengkapi dengan parameter dari variabel/object options diatas:
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
5. Membuat marker dan event click
Langkah selanjutnya adakan membuat marker pada tiap-tiap lokasi yang berbeda dan event click untuk masing-masing marker yang tujuannya adalah menampilkan informasi tertentu ketika marker tersebut diklik. Beriku ini kode penambahan marker untuk lima lokasi serta event click-nya :
var marker, i;
// proses penambahan marker pada masing-masing lokasi yang berbeda
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
// Menampilkan informasi pada masing-masing marker yang diklik
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}Kode Lengkapnya Untuk Create Multiple Marker Google Maps
Pada tutorial ini kita akan membuat marker untuk lokasi : Banda Aceh, Sabang, Calang, Langsa dan Blangpidie serta akan ditampilkan masing-masing informasi tentang ibukota daerah mana masing-masing lokasi marker tersebut begitu diklik, seperti yang ditunjukkan oleh Gambar.1 diatas :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Marker Map </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/informatika.css">
<!-- Bagian js -->
<script src='assets/js/jquery-1.10.1.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- akhir dari Bagian js -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var locations = [
['<h5>Ibukota Provinsi Aceh</h5>', 5.550176, 95.319263],
['<h5>Ibukota Kab.Aceh Jaya</h5>', 4.727890, 95.601373],
['<h5>Ibukota Abdya</h5>', 3.818570, 96.831841],
['<h5>Ibukota Kotamadya Langsa</h5>', 4.476020, 97.952447],
['<h5>Ibukota Kotamadya Sabang</h5>', 5.909284, 95.304742]
];
var infowindow = new google.maps.InfoWindow();
var options = {
zoom: 8,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Pembuatan petanya
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var marker, i;
// proses penambahan marker pada masing-masing lokasi yang berbeda
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
});
// Menampilkan informasi pada masing-masing marker yang diklik
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
};
</script>
</head>
<body onload="initialize()">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Dunia Informatika</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</nav>
</br></br></br></br>
<div class="container" style="margin-top:10px">
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">Marker Google Maps</div>
<div class="panel-body">
<div id="map_canvas" style="width: 700px; height: 600px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>