Bagi beberapa orang yang suka memperhatikan tampilan, tentunya
marker pada google maps merupakan salah satu yang bisa jadi poin utama. Semakin menarik tampilan yang diberikan , maka sangat tidak membosankan pengunjung melihat maps. Berikut kode javascript untuk menambah icon pada maps.
<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 posisi = {lat:0.512574, lng: 101.448355};
var gambar = "http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/map-marker-icon.png";
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',
icon: gambar,
});
penanda.push(marker);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={ API KEY ANDA }&callback=initMap">
</script>
<body>
<h1>Mengubah Marker Menjadi Icon pada Google Maps</h1>
<p>Java Source Code</p>
<div id="map"></div>
</p>
</body>
</html>
Pada baris 15 yaitu
var gambar = "http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/map-marker-icon.png";
merupakan url dari icon atau gambar . Lalu gambar tersebut dipanggil pada bagian method penambahan marker, tepat pada baris 32.
icon: gambar,
Sebagai catatan saja,menurut saya gunakan icon yang sesuai ukurannya yaitu berkisar 60px ke bawah.
0 Komentar
Keep Learning and Keep Sharing