<!DOCTYPE html>
<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;}
button {background-color: #1d98e0;text-align: center;color: #fff;padding: 8px;border-radius: 10px; }
#map { height: 100%; }
</style>
</head>
<script type="text/javascript">
var map , penanda = [];
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);
});
}
function tambah(location){
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
title: 'Java Source Code'
});
penanda.push(marker);
}
function setMapOnAll(map) {
for (var i = 0; i < penanda.length; i++) {
penanda[i].setMap(map);
}
}
function sembunyikan() {
setMapOnAll(null);
}
function tampilkan() {
setMapOnAll(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
</script>
<body>
<h1>Menambah Marker Dengan Fungsi Click pada Google Maps</h1>
<p>Java Source Code</p>
<div id="map"></div>
<p>
<button onclick="sembunyikan()"> Sembunyikan Maps </button>
<button onclick="tampilkan()"> Tampilkan Maps </button>
</p>
</body>
</html>Pada baris 14 terdapat variabel penanda = [] , dimana variabel ini duguanakan untuk menampung array pada marker yang di tambah.
Pada baris 25 sampai 33 dapat anda pelajari di link <Tutorial> .
Pada baris 34 sampai 38 merupakan method untuk menyimpan nilai posisi dari marker.
Pada baris 29 sampai 41 merupakan method yang digunakan untuk menyembunyikan marker oada map yang disimpan dalam bentuk array.
Pada baris 42 sampai 44 merupakan method untuk menampilkan seluruh data marker pada google maps.
Dan baris 53 dan 54 adalah tombol yang masing-masing memiliki fungsi pemanggilan metode saat tombol di klik.
0 Komentar
Keep Learning and Keep Sharing