MASIGNASUKAv101
4551133496077351792

Cara Membuat Fungsi Show atau Hide Marker pada Google Maps

Cara Membuat Fungsi Show atau Hide Marker pada Google Maps
Add Comments
Wednesday, 10 February 2016
Metode show pada google maps berfungsi untuk menampilkan marker yang tersembunyi. Sedangkan hide menggunakan metode clear pada google maps, methode ini menghapus marker pada maps namun koordinat pada maps tetap tersimpan pada array.
<!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);
    }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={API KEY ANDA}&callback=initMap">
    </script>
  <body>
  <h1>Menambah Marker Dengan Fungsi Click pada Google Maps</h1>
  <p>Java Source Code</p>
    <div id="map"></div>
  <p>
    <button onclick="sembunyikan()"> Sembunyikan Maps </button>
    <button onclick="tampilkan()"> Tampilkan Maps </button>
  </p>
  </body>
</html>
Penjelasan :
Pada baris 14 terdapat variabel penanda = [] , dimana variabel ini duguanakan untuk menampung array pada marker yang di tambah.
Pada baris 25 sampai 33 dapat anda pelajari di link <Tutorial> .
Pada baris 34 sampai 38 merupakan method untuk menyimpan nilai posisi dari marker.
Pada baris 29 sampai 41 merupakan method yang digunakan untuk menyembunyikan marker oada map yang disimpan dalam bentuk array.
Pada baris 42 sampai 44 merupakan method untuk menampilkan seluruh data marker pada google maps.
Dan baris 53 dan 54 adalah tombol yang masing-masing memiliki fungsi pemanggilan metode saat tombol di klik.
Hady Eka Saputra

Belajarlah ketika orang lain sedang malas-malasan, dan malas-malasan lah ketika orang sudah mulai sadar untuk belajar. :v