[PHP] Menyimpan Data Marker Google Maps API ke Database

Waktu Membaca: 4 menit

Diartikel sebelumnya membuat peta lokasi dengan google maps api, kita sudah belajar cara menampilkan marker di maps.  Selanjutnya kita akan belajar cara menambah marker di maps menggunakan Drawing Tools atau Drawing Manager dan menyimpannya  ke dalam tabel disuatu database.

Caranya sederhana, hanya mengambil koordinat latitude dan longitude dari drawing tools kemudian memanggil file *.php untuk menyimpan ke dalam tabel

Catatan:
diartikel ini saya menggunakan API Key berbayar. Tampilan atau fitur yang ada di Map yang belum aktif billing di API Key-nya mungkin berbeda.

Persiapan Data

Buat dahulu Database baru  (nama bebas, namun dicontoh ini saya menggunakan database bernama yudhatp_blog, dan tabel bernama lokasi. Ditabel lokasi kita buat 4 kolom yaitu lokasi_id, latitude, longitude dan keterangan (field ini opsional karena dipakai nanti ditutorial selanjutnya 🙂 ).

lokasi (table)

File Koneksi

buat file bernama koneksi.php, ketik kode berikut:

<?php
   define('DB_SERVER', 'localhost');
   define('DB_USERNAME', 'root');
   define('DB_PASSWORD', '');
   define('DB_DATABASE', 'yudhatp_blog');
   $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
File Map

Selanjutnya buat lagi file php bernama marker_map.php, tulis kodenya sebagai berikut :

<?php
include("koneksi.php");
?>
  <div id="dvMap" style="width: 1000px; height: 550px"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA&libraries=drawing" async defer></script>
  <script type="text/javascript">
    var markers = [
    <?php
    $sql = mysqli_query($db, "SELECT * FROM lokasi");
    while(($data =  mysqli_fetch_assoc($sql))) {
    ?>
    {
         "lat": '<?php echo $data['latitude']; ?>',
         "long": '<?php echo $data['longitude']; ?>',
         "keterangan": '<?php echo $data['keterangan']; ?>'
    },
    <?php
    }
    ?>
    ];
    </script>
    <script type="text/javascript">
        window.onload = function () {
      
            var mapOptions = {
            center: new google.maps.LatLng(-2.2459632,116.2409634),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

      var drawingManager = new google.maps.drawing.DrawingManager({
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: [google.maps.drawing.OverlayType.MARKER]
                    }
                });
      drawingManager.setMap(map);
      
            for (i = 0; i < markers.length; i++) {
                var data = markers[i];
        var latnya = data.lat;
        var longnya = data.long;
        var myLatlng = new google.maps.LatLng(latnya, longnya);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.keterangan
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent('<b>Keterangan</b> :' + data.keterangan + '<br>');
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>

Ketika dijalankan, marker_map.php akan terlihat sebagai berikut :

Sampai disini drawing tools atau drawing manager sudah muncul tapi belum berfungsi. Kita harus membuat eventListener ketika marker yang berada di drawing tools diletakkan di maps. Event yang dipakai adalah markercomplete.

Tambahkan lagi code berikut :

google.maps.event.addListener(drawingManager, 'markercomplete', function(marker){
    var lat = marker.getPosition().lat(); 
    var lng = marker.getPosition().lng();
    if (confirm('Anda ingin menyimpan marker ini?')){
  window.location.href = "simpan_marker.php?lat="+lat+"&lng="+lng;
    }
});
Buat File simpan_marker.php
<?php
require_once 'koneksi.php';
  function pesan($msg,$url){
    echo "<script>window.alert('$msg');window.location=('$url');</script>";
  }
  
  $latitude = $_GET['lat'];
  $longitude = $_GET['lng'];
  $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
  $query = "INSERT INTO lokasi (latitude,longitude) VALUES ('$latitude','$longitude')";
  
  if ($db->query($query)) {
    pesan("berhasil menyimpan data marker","marker_map.php");
  }else{
    pesan("gagal menyimpan data marker","marker_map.php");
  } 
?>
Penjelasan Kode
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA&libraries=drawing" async defer></script>

libraries=drawing adalah kode yang wajib ada setelah API Key untuk menggunakan drawing tools. Hal tersebut diperlukan karena library drawing berisi class untuk melakukan penggambaran di drawinglayer berupa polygon, circle, marker, polyline dan sebagainya di map.

Dan seperti biasa API_KEY_ANDA diisi dengan API Key yang kita punya.

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingControl: true,
    drawingControlOptions: {
         position: google.maps.ControlPosition.TOP_CENTER,
         drawingModes: [google.maps.drawing.OverlayType.MARKER]
    }
});

membuat object drawing manager dengan posisi berada di tengah atas. Pada drawing manager diartikel ini hanya tersedia opsi untuk membuat atau menggambar marker. Bisa ditambahkan dengan cara :

drawingModes: [google.maps.drawing.OverlayType.MARKER,'rectangle']

Hasilnya

ketika kita memilih marker pada drawing tools, maka cursor akan berubah menjadi simbol “+” . Ketika cursor atau mouse kita klik pada maps, maka akan muncul confirm dialog apakah kita akan menyimpan data latitude dan longitude dimaps ke tabel. Pada contoh saya klik di Bina Sarana Informatika Margonda.

Ketika kita memilih OK pada confirm dialog sebelumnya, maka muncul notifikasi bahwa data marker sudah berhasil tersimpan dan akan mereload ulang marker_map.php

ketika dilakukan zoom, marker berada di koordinat yang tepat :).

Semoga Bermanfaat

Referensi : 

https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
https://developers.google.com/maps/documentation/javascript/events

[PHP] Membuat Peta Lokasi Dengan Google Maps API

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *