Label dapat kita fungsikan sebagai identitas penanda, semisalnya saya akan menandai dua lokasi dengan marker dan dalam hal ini saya menggunakan marker yang berlabel. Kita sebut saja label A dan B, dan marker dengan label A dapat menjadi penanda dimana lokasi tersebut adalah semisalnya lokasi kampus dan marker dengan label B adalah posisi rumah saya. Sehingga dengan pelabelan dapat memudahkan posisi suatu daerah.
<html>
<head>
<title>Java Sc Developer - MAPS</title>
<style type="text/css">
html, body {width: 600px;height: 400px;margin: 0 auto ;padding: 0;}
h1 {text-align: center;text-transform: uppercase;}
p {text-align: center;font-size: 14px;text-transform: uppercase;}
#map {height: 100%;}
</style>
</head>
<script type="text/javascript">
var map ;
var penanda = [] ;
var index = 0;
var label = 'WWW.JAVA-SC.WEB.ID';
var posisi = {lat:0.512574, lng: 101.448355};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: posisi
});
map.addListener('click', function(event) {
tambah(event.latLng , map);
});
}
function tambah(location , map){
var marker = new google.maps.Marker({
position: location,
map: map,
label: label[index++ % label.length],
draggable: true,
title: 'Java Source Code'
});
penanda.push(marker);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
</script>
<body>
<h1>Merubah Label Marker Maps pada Google Maps</h1>
<p>Java Source Code</p>
<div id="map"></div>
</p>
</body>
</html>
Kunci utama pada pembuatan label ada pada baris 14 , 15 dan 30.
var index = 0;
merupakan variabel penentu dimana label akan di mulai , semisalnya saya memiliki 'ABCD' dan dimulai dengan index 0. Maka akan dimulai pengambilan dari label pertama yaitu A,B,C,D . Apabila kita ganti menjadi 1 maka pengambilan label akan diambil dari B...dst, dalam hal ini menggunakan konsep Array.
var label = 'JAVA-SC.BLOGSPOT.COM';
adalah variabel dari isi label yang terdiri string. [code]label: label[index++ % label.length],[/code] pada bagian inilah label di tampilkan saat marker di tambah.
0 Komentar
Keep Learning and Keep Sharing