Kursus a2fahmi Gratis klik disini

Kursus Android Gratis, dengan syarat:

  • 1. Laki-laki beragama islam dan sholat 5 waktu, domisili bogor
  • 2. Masih SMK/SMA (matematika=6) / Mahasiswa (jurusan IT) / Pengganguran (Menguasai dasar JAVA)
  • 3. No HandPhone selain indosat
  • 4. Saat belajar bersedia membantu projek tanpa dibayar / membuat aplikasi di playstore dengan copyright saya
  • 5. Membawa Laptop

Kursus Framework CodeIgniter, dengan syarat:

  • 1. Laki-laki beragama islam dan sholat 5 waktu, domisili bogor
  • 2. Masih SMK/SMA (matematika=6) / Mahasiswa (jurusan IT) / Pengganguran (suka dengan komputer)
  • 3. No HandPhone selain indosat
  • 4. Saat belajar bersedia membantu projek tanpa dibayar
  • 5. Membawa Laptop

Fahmi Basya Kartapura On July - 19 - 2013

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:




Categories: Google Map

Leave a Reply