Marker pada simplemap(petadetail)

Setelah menampilkan detailpeta kita akan membuat sebuah marker untuk menanndai lokasi tertentu, Marker dengan atribut position (posisi marker), map (tempat marker ditampilkan). Berikut modifikasi kode sebelumnya (yang tercetak tebal).

<script>

   ... // kode sebelumnya

   function initialize()

   { ... // kode sebelumnya

     addMarker(latlng);

   }

   google.maps.event.addDomListener(window, 'load', initialize);

   function addMarker(location)

   { marker = new google.maps.Marker(

     { position: location,

       map: map,

     });

   }

  </script>

Marker juga bisa ditentukan secara interaktif. Untuk memasukkan marker (dengan klik mouse) maka di dalam map harus ditambahkan listener yang tugasnya “mendengar” adanya event (berupa klik mouse) dan menentukan apa yang harus dilakukan ketika event itu terjadi. Yang dilakukan adalah memanggil function addMarker yang sudah dibuat sebelumnya. Karena bisa lebih dari satu marker maka disediakan array untuk menyimpan masing-masing marker. Berikut modifikasi script sebelumnya (tercetak tebal).

<script>

   var map;

   var markersArray = [];    // array utk menampung marker

   function initialize()

   { ... // kode sebelumnya

     google.maps.event.addListener(map, 'click', function(event)

     { addMarker(event.latLng);

     });  // ketika ada klik maka tambahkan marker utk koordinat tsb

   }

   google.maps.event.addDomListener(window, 'load', initialize);

   function addMarker(location)

   { marker = new google.maps.Marker(

     { position: location,

       map: map,

     });

     markersArray.push(marker);   // masukkan marker di dalam array

   }

  </script>

Coba scriptnya, setelah ditampilkan mapnya kliklah di sembarang tempat maka akan tampak marker baru.

Sekarang marker dimanfaatkan untuk menyimpan informasi yang terkait dengan marker itu. Bila marker di-klik maka ada kotak dialog untuk mengisikan sesuatu. Berarti terhadap marker perlu ditambahkan listener untuk mendengar adanya klik, dan action yang relevan bila klik terjadi. Modifikasilah kodenya:

<script>

... // kode sebelumnya

   google.maps.event.addDomListener(window, 'load', initialize);

   infowindow = new google.maps.InfoWindow;    // kotak dialog

   function addMarker(location)

   { ...// kode sebelumnya

     var n = markersArray.length;

     var isian = "<table>" +

     "<tr><td>Nama:</td> <td><input type='text' id='nama'/> </td> </tr>" +

     "<tr><td>Alamat:</td> <td><input type='text' id='alamat'/></td> </tr>" +

     "<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData("+n+")'/></td></tr></table>";

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.setContent(isian);    // tentukan isi infowindow

     infowindow.open(map, markersArray[n]);   // buka infowindow

     });  // ketika diklik maka buka window yg berisi kode html

     markersArray.push(marker);

   }

  </script>

Kotak dialog berupa obyek dari kelas google.maps.InfoWindow. Pada saat suatu marker dibuat, disusun kode untuk sejumlah komponen pengisian data (di variabel isian). Selanjutnya pada listener untuk marker ditentukan action berupa membuka kotak  dialog (bernama infowindow pada peta dan lokasi tertentu).

Perhatikan ke definisi variabel isian di atas dan gambar di atas, ketika button “Save & Close” ditekan (terjadi event onClick) maka function SaveData(n) dipanggil. Variabel n dimaksudkan untuk menunjukkan titik ke-n yang terkait dengan kotak dialog. Sekarang kita buat function SaveData seperti yang dimaksud. Gunakan script XMLHttpRequest seperti yang pernah kita buat sebelumnya (jangan diketik ulang). Copykan dan modifikasilah seperlunya, letakkan di bawah function addMarker():

function addMarker(location)

   { // kode lain

   }

   function saveData(n)

   { var nama = escape(document.getElementById("nama").value);

     var alamat = escape(document.getElementById("alamat").value);

     var latlng = markersArray[n].getPosition();

     var url = "simpan_marker.php?nama="+ nama + "&alamat=" + alamat +

       "&lat=" + latlng.lat() + "&lng=" + latlng.lng();

     kirimRequest(url);

   }

   var xmlHttp = buatObjekXmlHttp();

   function buatObjekXmlHttp()        

   { var obj = null;

     if (window.ActiveXObject)

     { obj = new ActiveXObject("Microsoft.XMLHTTP");  

     }

     else

     { if (window.XMLHttpRequest)

       { obj = new XMLHttpRequest();

       }

       if (obj == null)     // Cek isi xmlHttp

       { document.write("Browser tidak mendukung XMLHttpRequest");

       }

       return obj;   

     }

   }

   function kirimRequest(url)

   { if (xmlHttp != null)

     { xmlHttp.onreadystatechange = ambilRespon;

       xmlHttp.open("GET", url, true);

       xmlHttp.send(null);

     }

   }

   function ambilRespon()          

   { if (xmlHttp.readyState == 4 && xmlHttp.status == 200)

     { var teks = (xmlHttp.responseText);

       if (String.trim(teks) != "OK")

       { alert("Gagal menyimpan");

       }

       infowindow.close();

     }

   }

Di function SaveData() diambil nilai dari isian nama dan alamat dari kotak dialog, serta didefinisikan script yang dipanggil oleh XMLHttpRequest yaitu simpan_marker.php. Pemanggilan simpan_marker.php dilakukan dengan menyertakan nilai nama, alamat, dan posisi marker. Yang dilakukan di simpan_marker.php adalah menyimpan informasi yang dikirimkan ke dalam suatu tabel database.

Sebelumnya buatlah suatu tabel dulu (misal databasenya bernama db_marker) dengan nama tabel tbl_marker, dengan struktur sebagai berikut:

Field	Type / Size	Keterangan
Id	int(3)	AUTO_INCREMENT
Nama	varchar(15)
Alamat	varchar(30)
Lat	float(12,8)
Lng	float(12,8)

Berikut kode simpan_marker.php:

<?php

  $nama = $_GET['nama'];    $alamat = $_GET['alamat'];

  $lat = $_GET['lat'];    $lng = $_GET['lng'];

  $db = "db_marker";   // sesuaikan dengan nama database anda

  $user = "root";

  $password = "";

  $koneksi = mysql_connect("localhost", $user, $password) or die(mysql_error());

  mysql_select_db($db, $koneksi) or die(mysql_error());

  $query = "INSERT INTO tbl_marker(nama, alamat, lat, lng) VALUES ('$nama', '$alamat', $lat, $lng)";

  $hasil = mysql_query($query) or die(mysql_error());

  mysql_close($koneksi);

  echo "OK";

?>

Setelah penyimpanan data ke tabel tbl_marker berhasil maka ada output berupa teks “OK”. Ini yang dijadikan identifikasi ketika kembali ke function ambilRespon() apakah proses simpan berhasil atau tidak. Bila berhasil maka kotak dialog ditutup, sedangkan bila gagal ada peringatan yang diberikan.

Apakah hanya itu informasi yang harus disimpan? Apakah harus itu struktur tabelnya? Tentu saja TIDAK karena harus disesuaikan dengan kebutuhan. Yang saja sajikan adalah contoh bagaimana membuat marker sebagai penanda, serta mengkaitkan marker dengan aksi tertentu (dalam hal ini data disimpan ke dalam tabel).

Semoga bermanfaat. . .!