New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Merubah Marker Menjadi Icon Gambar Pada Google Maps

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.
Share This :