<!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() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: posisi
});
var penanda = new google.maps.Marker({
position: posisi,
map: map,
draggable: true,
title: 'Java Source Code'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
</script>
<body>
<h1>Membuat Marker Bisa di Drag atau di Pindahkan Pada Google Maps</h1>
<p>Java Source Code</p>
<div id="map"></div>
</p>
</body>
</html>
Penjelasan :
Pada baris 5 sampai 31 adalah style menggunakan css.
Pada baris 33 sampai 48 merupakan javascrip yang digunakan untuk menampilkan dan mengkostum google maps. Perhatikan pada baris 44 , dimana fungsi drag di letakan bernilai benar atau true.
Pada baris 54 adalah frame untuk menampilakn maps.
0 Komentar
Keep Learning and Keep Sharing