Suatu koordinat pada maps tidak akan bisa anda tahu kecuali tidak ada penanda yang menepati titik tengah lokasi tersebut. Penggunaan marker pada google maps merupakan hal terpenting dalam mengetahui suatu posisi. Berikut tutorial dalam penambahan marker pada goolge maps dalam HTML dan JS. Contoh untuk tutorial ini saya masukan dalam file dengan nama file "Tutorial_Maps_2.html" , tepat didalam nya ketikan kode dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Java Sc Developer - MAPS</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<script type="text/javascript">
var map , penanda;
var posisi = {lat: 0.4677041, lng: 101.3565166};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: posisi,
zoom: 16,
});
penanda = new google.maps.Marker({
position: posisi,
map: map,
title: 'Simple Marker - java-sc.blogspot.com'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY MILIK ANDA}&callback=initMap">
</script>
<body>
<div id="map"></div>
</body>
</html>
Untuk penjelasan sebelumnya selain yang akan saya jelaskan dapat anda lihat pada tutorial
Membuat Maps dengan Google Maps.
var map , penanda;
Merupakan baris panembahan variabel penanda atau variabel yang dihunakan untuk tempat menyimpan marker pada maps.
penanda = new google.maps.Marker({
position: posisi,
map: map,
title: 'Simple Marker - java-sc.blogspot.com'
});
Pada baris ini lah marker dengan variabel penanda di panggil.
Position merupakan lokasi maps yang akan di tandai / diberi marker dan terlihat pada baris 18.
Map pada baris 26 adalah untuk pemanggilan varibel map dan
title adalah info dari marker. Untuk contoh anda bisa perhatikan contoh dibawah.
0 Komentar
Keep Learning and Keep Sharing