Multiple Marker pada Google Maps dengan Icon yang Berbeda
Untuk iconnya, anda dapat menggunakan alamat url yang memiliki icon marker: http://maps.google.com/mapfiles/ms/icons/. Ataupun kita dapat menggunakan icon yang telah dulu kita simpan pada local directory. Disini kita akan menggunakan icon yang berasal dari local directory, untuk yang menggunkan url, prinsipnya sama saja, tinggalh dirubah path nya aja.
Berikut ini adalah output yang akan kita buat, seperti ditampilkan oleh Gambar.1 dibawah ini :
Seperti yang terlihat pada Gambar.1, kita memiliki lima lokasi yang sudah ditandai dengan marker. Dimana masing-masing untuk lokasi tersebut memiliki icon marker yang berbeda-beda.
Untuk pemahaman tentang pembuatan marker pada google maps edisi ini, silahkan baca tutorial google maps sebelumnya :
Contoh Lainnya Tentang Pembuatan Marker pada Google Maps
- Cara menambahkan marker pada Google Maps
- Membuat multiple marker pada Google Maps
- Menampilkan marker Google Maps dari Database
Maka untuk pemanggilannya dilakukan sebagai berikut :
// Lokasi folder dari icon
var iconMarker = 'icon/';
// variabel uniqueIcons untuk menyimpan icon yang berbeda-bedan
var uniqueIcons = [
iconMarker + 'red-dot.png',
iconMarker + 'green-dot.png',
iconMarker + 'blue-dot.png',
iconMarker + 'orange-dot.png',
iconMarker + 'purple-dot.png',
iconMarker + 'pink-dot.png',
iconMarker + 'yellow-dot.png'
]Kode lengkap Multiple marker dengan icon yang berbeda
<!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 Dengan Icon yang berbeda-beda</title>
<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>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
// Data yang disimpan dalam variabel array locations
var locations = [
['<h4>Bondi Beach</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]
];
// Lokasi folder dari icon
var iconMarker = 'icon/';
// variabel uniqueIcons untuk menyimpan icon yang berbeda-bedan
var uniqueIcons = [
iconMarker + 'red-dot.png',
iconMarker + 'green-dot.png',
iconMarker + 'blue-dot.png',
iconMarker + 'orange-dot.png',
iconMarker + 'purple-dot.png',
iconMarker + 'pink-dot.png',
iconMarker + 'yellow-dot.png'
]
var iconsLength = uniqueIcons.length;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(4.845582, 96.271539),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var infowindow = new google.maps.InfoWindow();
var markers = new Array();
var iconCounter = 0;
// Membuat marker dengan icon yang berbeda-beda
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: uniqueIcons[iconCounter]
});
markers.push(marker);
// Membuah event click dan menambah infowindows
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
iconCounter++;
if(iconCounter >= iconsLength) {
iconCounter = 0;
}
}
function autoCenter() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i].position);
}
map.fitBounds(bounds);
}
autoCenter();
};
</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">Different Marker On The Location of Google Maps </div>
<div class="panel-body">
<div id="map" style="width: 700px; height: 600px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
