New!
×Close

Notifications

Disqus Logo
MASIGNCLEAN104

Cara Menghapus Marker Dari Maps Pada Google Maps

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