Membuat Multiple Marker pada Google Maps
Untuk membuat multiple marker pada banyak lokasi pada google maps, maka kita harus menentukan lokasi-lokasi mana saja yang ingin diberi marker. Nilai lokasi dalam bentuk kordinat latitude dan longtitude. Kemudian baru dilakukan perulangan untuk mengeset marker berdasarkan lokasi yang telah kita tentukan.
Berikut ini adalah ouput yang diharapkan pada akhir tutorial ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Tahapan membuat multiple marker pada Google Map
1. Script untuk terhubung ke server Google MapsScript ini dibutukan untuk dapat terhubung ke server google maps
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>Pada bagian paremeter sensor, kita set false. Hal ini dikarenakan kita akan menentukan sendiri posisi lokasi.
2. Mendefinisikan posisi lokasi
Karena kita akan memberi marker untuk banyak posisi lokasi, maka harus dipersiapkan lokasi mana saja yang akan kita beri marker. Misal : Kita akan membuat marker untuk lima posisi, maka pendefinisian lokasinya sebagai berikut:
// 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. Mengeset paremeter untuk object options pada tampilan Google Maps
var options = {
zoom: 8,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP
}Silahkan baca tutorialnya tentang penjelasan properti tampilan Google Maps
4. Pembuatan petanya
Langkah ini untuk pembuatan peta yang dilengkapi parameter dari variabel/object options diatas:
// Pembuatan petanya
var map = new google.maps.Map(document.getElementById('map_canvas'), options);5. Proses pembuatan marker dan event click
Pada langkah ke-5 ini, kita akan membuat marker untuk tiap-tiap lokasi yang berbeda serta menambahkan event click untuk tiap-tiap marker dimana fungsinya untuk menampilkan informasi yang kita definisikan.
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 lengkap multiple marker pada Google Map
Dalam contoh ini, kita akan membuat marker untuk lokasi : Banda Aceh, Sabang, Calang, Langsa dan Blangpidie serta akan ditampilkan masing-masing informasi begitu salah satu marker 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">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Multi Marker Map </title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.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">
Pusat Ilmu Secara Detil</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>
<!--- Bagian Judul-->
<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>
