<!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);
}
</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>
</body>
</html>Kita abaikan saja bagian lain dan penjelasan terpenting berada pada bagian javascripnya yang dimulai pada baris 33 sampai 53.
Pada baris 34 terdapat variabel penanda = [] , yaitu merupakan variabel penampung array.
Pada baris 41 sampai 43 merupakan scrip untuk perintah event click pada maps.
Pada baris 45 sampai 53 adalah metode untuk menampilkan data marker yang dimana lokasi dari marker adalah dinamis terganting lokasi yang di klik pada maps. Selain itu pada method ini menggunakan fungsi dragable yang memungkinkan untuk memindahkan tiap marker.
0 Komentar
Keep Learning and Keep Sharing