Menggambar Polygon pada Google Maps dan Menyimpan nilainya dalam Database menggunakan Google Maps V3 JavaScript dan PHP

Sebelumnya kamu harus membaca artikel Menampilkan Tool Gambar dalam Google Maps V3 JavaScript

Contoh Kasus:

Saya ingin menggambar polygon dalam peta yang terpusat di kota Bogor dengan titik Latitude= “-6.582717” dan Longitude = “106.778648”, lalu setelah saya selesai menggambar maka data untuk titik Latitude dan Longitudenya disimpan dalam database.

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Pembuatan Tabel

Saya membuat Tabel bernama tb_resort dengan struktur seperti berikut ini:

  • id_resort INT PRIMARY_KEY AUTO_INCREMENT
  • koordinat VARCHAR(100)

Pembuatan Peta Dan Tool Gambarnya

Saya membuat file bernama menggambar_path.php dengan isi kode seperti berikut ini:

<html> 

<head>

<script src=”https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&libraries=drawing, geometry”></script>

<script type=’text/javascript’>

var infowindow;

var map;

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(-3.7356318280096628, 102.39157095551491),

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

infowindow = new google.maps.InfoWindow();

map = new google.maps.Map(document.getElementById(‘petaBogor’),    mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({

drawingControl: true,

drawingControlOptions: {

position: google.maps.ControlPosition.TOP_CENTER,

drawingModes: [

google.maps.drawing.OverlayType.POLYGON,

]

}

});

drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, ‘polygoncomplete’, function (polygon) {

var coordinates = polygon.getPath().getArray();

simpan(coordinates);

});

}

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

function simpan(coordinates){

var k=google.maps.geometry.encoding.encodePath(coordinates)

$.post(“simpan_poligon.php”, { koordinat:k })

}

</script>

</head>

<body>

<div id=”petaBogor” />

</body>

</html>

Keterangan:

  • google.maps.event.addListener(drawingManager, ‘polygoncomplete’, function (polygon) {} ), Kode ini digunakan untuk memberikan listener kepada objek drawingManager dimana kode yang terdapat dalam function() akan dijalankan ketika kita telah selesai menggambar polygon.
  • polygon.getPath().getArray(), Kode ini digunakan untuk mengambil array yang berisi titik-titik koordinat dari poligon.
  • google.maps.geometry.encoding.encodePath(coordinates), Kode ini digunakan untuk mengenkripsi variabel coordinates.

Pembuatan File simpan_poligon.php

Buatlah file simpan_poligon.php dengan isi seperti berikut ini:

$koneksi = mysql_connect(“localhost”, “NamaUserMySQL”, “PasswordUserMySQL”) or die (‘Error connecting to mysql’); 

mysql_select_db(“NamaDatabasemu”,$koneksi);

$data=$_POST[‘koordinat’];

$sql=”INSERT INTO tb_resort (koordinat) VALUES (‘$data’)”;

mysql_query($sql);

Hasil:

Setelah koordinat tersimpan pada tabel tb_resort maka hasilnya akan seperti terlihat pada gambar dibawah ini:

You may also like...

Leave a Reply

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