Jin Toples Programming

Event Listener Di Google Maps - Event listener adalah kemampuan google maps untuk mengetaui peristiwa di map. Apa bila terjadi suatu kejadian atau event di map seperti klik, drag, zoom, mouse over, mouse out, dll google maps dapat mengetahuinya dan kita dapat menggunakannya untuk mendefinisikan fungsi apabila sebuah event terjadi. Sebenarnya pembahasan ini harusnya terjadi di awal - awal akan tetapi terlewat, yah dari pada tidak di bahas bkakakak. Ini merupakan hal penting yang anda harus ketahui untuk menggunakan API Google Maps. Untuk lebih jelasnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama event_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Event Listener di Google Maps</title>
    <style>
   html { height: 100% }
   #map-canvas {float:left; height: 400px; width:80%}
   .event {
        transition: background-color 0.5s ease-out;
        padding-bottom: 2px;
      }
   #events {
        padding: 2px;
        overflow: hidden;
        font-size: 15px;
        font-family: 'Droid Sans Mono', monospace;
      }
   .active {
        background-color: #99CCFF;
      }
      .inactive {
        background-color: none;
      }
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var events = [
    'bounds_changed', 'center_changed', 'click',
    'dblclick', 'drag', 'dragend',
    'dragstart', 'heading_changed', 'idle',
    'maptypeid_changed', 'mousemove', 'mouseout',
    'mouseover', 'projection_changed', 'resize',
    'rightclick', 'tilesloaded', 'tilt_changed',
    'zoom_changed'
  ];
  
  function setupListener(map, name) {
    var timeout;
    var eventRow = document.getElementById(name);
    google.maps.event.addListener(map, name, function() {
   eventRow.className = 'event active';
   clearTimeout(timeout);
   var timeout = setTimeout(function() {
     eventRow.className = 'event inactive';
   }, 1000);
    });
  }
  
  function initialize() {
    populateTable();
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
   center: new google.maps.LatLng(-6.187931, 107.031279),
   zoom: 11,
   mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    for (var i = 0; i < events.length; i++) {
   setupListener(map, events[i]);
    }    
  }
  function populateTable() {
    var eventsTable = document.getElementById('events');
    var content = '';
    for (var i = 0; i < events.length; i++) {
   content += '<div class="event" id="' + events[i] + '">' + events[i] +
     '</div>';
    }
    eventsTable.innerHTML = content;
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Event Listener di Google Maps</h1>
  <div id="map-canvas"></div>
  <div id="events"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan baris kode berikut :

var events = [
 'bounds_changed', 'center_changed', 'click',
 'dblclick', 'drag', 'dragend',
 'dragstart', 'heading_changed', 'idle',
 'maptypeid_changed', 'mousemove', 'mouseout',
 'mouseover', 'projection_changed', 'resize',
 'rightclick', 'tilesloaded', 'tilt_changed',
 'zoom_changed'
 ];

var events ini berisi array kumpulan event yang dapat terjadi di maps, untuk melihat lebih banyak event lainnya lihat di refrensi Events google maps

function setupListener(map, name) {
    var timeout;
    var eventRow = document.getElementById(name);
    google.maps.event.addListener(map, name, function() {
   eventRow.className = 'event active';
   clearTimeout(timeout);
   var timeout = setTimeout(function() {
     eventRow.className = 'event inactive';
   }, 1000);
    });
  }

Fungsi setupListener ini kita gunakan untuk menciptakan event listenernya, karena disini kita ingin mengetes banyak event dengan tujuan sama jadi disini kita buat dalam fungsi. Jika anda ingin mencoba sebuah event saja anda dapat menggunakan script :

google.maps.event.addListener(marker, 'click', function() {
    //masukan hal yang dilakukan jika event terjadi disini
  });

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Event Listeners Google Maps di sini : CEK TKP

Event Listener Di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.