BLANTERORBITv102

    Cara Menghapus Marker Dari Maps Pada Google Maps

    Kamis, 11 Februari 2016
    Tutorial kali ini adalah lanjutan dari cara membuat fungsi show hide marker , atau dapat anda lihat di sini : Fungsi Show Hide Marker Pada Google Maps . Berbeda dari menghapus marker pada tutorial tersebut, disini lebih menyeluruh terutama pada data posisi yang merupakan array juga dihapus. Sehingga marker tidak dapat ditampilkan kembali di dalam map.
    <!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);
          }
        function setMapOnAll(map) {
          for (var i = 0; i < penanda.length; i++) {
            penanda[i].setMap(map);
          }
        }
        function sembunyikan() {
          setMapOnAll(null);
        }
        function tampilkan() {
          setMapOnAll(map);
        }
        function hapus() {
     sembunyikan();
     penanda = [];
    }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
        </script>
      <body>
      <h1>Menghapus Marker Dari Maps Pada Google Maps</h1>
      <p>Java Source Code</p>
        <div id="map"></div>
      <p>
        <button onclick="sembunyikan()"> Sembunyikan Marker </button>
        <button onclick="tampilkan()"> Tampilkan Marker </button>
        <button onclick="hapus()"> Hapus Marker </button>
      </p>
      </body>
    </html>
    Sudah saya jelaskan sebelumnya, tutorial ini adalah lanjutan dari tutorial sho hide marker, sehingga saya tidak menjelaskan secara detai tiap baris kode yang lain. Fungsi untuk menghapus marker terletak pada baris 45 sampai 48.
    sembunyikan();
    Adalah baris untuk memanggil method dari sembunyi dan pada
    penanda = [];
    adalah memberi nilai penanda menjadi nol. Kemudian method ini di jalankan pada saat menekan tombol hapus marker pada baris 59.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing