Event, Menampilkan alert posisi tengah peta yang baru setelah drag selesai

Contoh program berikut menunjukkan penggunaan event moveend. Ketika akhir drag, baru aksi tertentu dijalankan. 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.81861119), 13);     GEvent.addListener(map, "moveend", function() {       var center = map.getCenter();       alert(center.toString());

    });

  } } 

Event : Menambahkan 5 titik di peta yang masing-masing menampilkan potongan pesan rahasia jika diklik 

Kode program berikut  berfungsi menyimpan 5 potong pesan yang kemudian dipasang pada window Info 5 buah Marker yang diletakkan secara acak. 

function initialize() {

  var message = ["This","is","the","secret","message"];

 

  if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.8186111), 13);

  

    // Creates a marker at the given point     // Clicking the marker will hide it     function createMarker(latlng, number) {       var marker = new GMarker(latlng);

      marker.value = number;

      GEvent.addListener(marker,"click", function() {

        var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];         map.openInfoWindowHtml(latlng, myHtml);

      });

      return marker;

  }

    // Add 5 markers to the map at random locations

    // Note that we don't add the secret message to the marker's instance data

    var bounds = map.getBounds();     var southWest = bounds.getSouthWest();     var northEast = bounds.getNorthEast();     var lngSpan = northEast.lng() - southWest.lng();     var latSpan = northEast.lat() - southWest.lat();     for (var i = 0; i < 5; i++) {

      var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),       southWest.lng() + lngSpan * Math.random());   map.addOverlay(createMarker(latlng, i + 1));

    }   } }

Event: Menampilkan window info berisi latitude, longitude dan zoom level ketika peta diklik 

Dalam program berikut, kita menangkap event klik pada peta, kemudian menampilkan window Info berisi latitude, longitude dan zoom level pada lokasi tempat pengguna mengklik. 

function initialize() {   if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map_canvas"));     map.setCenter(new GLatLng(-6.4, 106.81861119), 13);

    GEvent.addListener(map,"click", function(overlay,latlng) {            if (latlng) {            var myHtml = "Latitude & Longitude:

" +map.fromLatLngToDivPixel(latlng) + " , zoom level " + map.getZoom();         map.openInfoWindow(latlng, myHtml);

      }     });

    map.addControl(new GSmallMapControl());     map.addControl(new GMapTypeControl());

  } }

Event: Menampilkan alert jumlah klik yang sudah dilakukan kepada peta 

Aplikasi Google Maps API juga bisa menyimpan counter, misalnya dalam program ini ditunjukkan untuk menyimpan counter klik. 

function MyApplication() {   this.counter = 0;

  this.map = new GMap2(document.getElementById("map_canvas"));   this.map.setCenter(new GLatLng(-6.4, 106.8186111), 13);

  GEvent.bind(this.map, "click", this, this.onMapClick);

}

    

MyApplication.prototype.onMapClick = function() {   this.counter++;

  alert("Anda sudah mengklik " + this.counter +

        "kali.");

} 

function initialize() {   if (GBrowserIsCompatible()) {

    var application = new MyApplication();

  } } 

Event: Menghapus event listener  

Program berikut menunjukkan bagaimana cara menghilangkan event listener setelah klik 1 kali. Sebelumnya, ketika event klik program ini menghapus Marker.

function MyApplication() {   this.counter = 0;

  this.map = new GMap2(document.getElementById("map_canvas"));   this.map.setCenter(new GLatLng(-6.4, 106.8186111), 13);

  var myEventListener = GEvent.bind(this.map, "click", this,function(overlay,  latlng) {

     if (this.counter == 0) {        if (latlng) {

         this.map.addOverlay(new GMarker(latlng))          this.counter++;

       } else if (overlay instanceof GMarker) {

         // This code is never executed as the event listener is           // removed the second time this event is triggered          this.removeOverlay(marker)

       }

     } else {

       GEvent.removeListener(myEventListener);

     }   }); 

} 

function initialize() {

  var application = new MyApplication(); }

Sekian tuorial Event di map api dari saya,semoga bermanfaat buat teman2.. terimakasih.

NB : silakan ikutin blog dan tinggalkan komennya, terimakasih