Cara Menampilkan Lingkaran, Polyline dan Polygon di Google Maps

Google Maps adalah peta online gratis yang disediakan oleh Google, sang raksasa internet dunia. Walaupun gratis, peta ini cukup akurat dan terupdate setahun sekali. Banyak sekali fitur-fitur yang tersedia dalam versi gratis ini. Namun, jika menginkan fitur lebih, Anda dapat membeli versi berbayarnya.

Salah satu fitur yang ditawarkan oleh Google Maps adalah menambahkan ‘overlay’ yakni semacam layer custom yang berada di atas peta Google Maps. Anda bisa meng-customize layer ini sesuai kebutuhan Anda tanpa mengganggu peta aslinya. Efeknya adalah peta online Anda akan semakin nampak interaktif dan lebih bermanfaat untuk pengunjung. Dan yang pasti, peta Googe Maps + overlay custom ini hanya akan tertampil di web Anda, tidak akan tertampil di web lain. Dengan overlay ini Anda bisa menambahkan marker, info window, lingkaran,  polyline, polygon, dll. Dua item pertama sudah saya bahas pada tutorial sebelumnya, untuk cara menampikan lingkaran, polyline dan polygon di google map akan saya sampaikan tutorialnya pada artikel ini.

Menampilkan Lingkaran di Google Maps

Untuk menampilkan lingkaran di Google Maps caranya cukup mudah. Anda tinggal memanggil function ‘google.maps.Circle ()’ dengan parameter sebagai berikut :

– center: koordinat pusat lingkaran

– radius: jari-jari lingkaran dalam meter

– strokeColor: warna garis lingkaran (batas pinggir)

–  strokeOpacity: ketebalan garis lingkaran, dengan skala 0 – 1 dari paling tipis ke tebal

–  strokeWeight: lebar garis lingkaran

–  fillColor: warna lingkaran

–  fillOpacity: ketebalan warna lingkaran, dengan skala 0 – 1 dari paling tipis ke tebal

Jika parameter function google.maps.Circle () sudah dilengkapi, Anda tinggal menampilkan lingkaran di Google Maps dengan memanggil function ‘setMap ()’

Contoh script cara menampilkan lingkaran di Google Maps

var bandung = new google.maps.LatLng(-6.917464,107.619123);
       var lingkaran = new google.maps.Circle({
       center: bandung,
       radius: 50000,
       strokeColor: "#0000F7",
       strokeOpacity: 0.9,
       strokeWeight: 1,
       fillColor: "#0000F7",
       fillOpacity: 0.2
     });
lingkaran.setMap(map);

Download source code

[AdSense-A]

Catatan : untuk kode-kode warna html dapat Anda cari di internet atau bisa dengan menginstal program ‘Pixie’ (http://www.nattyware.com/pixie.php)

Hasil dari javascript di atas di web browser adalah sebagai berikut:

Menampilkan Polyline di Google Maps

Polyline adalah kumpulan garis yang membentuk objek tertentu. Kadang kita perlu menggambarkan polyline ini dip eta untuk menunjukkan parameter penting di peta seperti (misalnya) peta jalur kabel fiber optik milik perusahaan kita, jalur pipa PDAM atau mungkin yang lain. Kurang lebih begitulah fungsi polyline ini. Untuk menampilkan polyline di Google Maps caranya cukup mudah, yakni tinggal memanggil fungsi ‘google.maps.Polyline’ dengan parameter-parameter sebagai berikut:

– path: koordinat titik yang akan digambar garis polyline

– strokeColor: sama dengan di atas (sda)

– strokeOpacity: sda

– strokeWeight: sda

– fillColor: sda

– fillOpacity: sda

Jika parameter function sudah dilengkapi, Anda tinggal menampilkan polyline di Google Maps dengan memanggil function ‘setMap ()’

Contoh javascript menampilkan polyline di Google:

var rancaekek = new google.maps.LatLng(-6.967274,107.764911);
var majalaya = new google.maps.LatLng(-7.051798,107.745856);
var jalurkabel = new google.maps.Polyline({
    path: [bandung, rancaekek, majalaya, bandung],
    strokeColor: "#0000F7",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000F7",
    fillOpacity: 0.3
  });
jalurkabel.setMap(map);

Download source code javascript

Catatan: jika kita ingin menampilkan banyak polyline tentunya tidak efektif menggunakan cara di atas (walaupun bisa saja). Ada cara yang lebih efektif, yakni menggunakan file KML. Bisa dibaca tutorialnya di sini.

Tampilan di web browser untuk source code di atas adalah sebagai berikut:

Menampilkan Polygon di Google Maps

Polygon hampir sama dengan polyline. Bedanya polygon akan membentu bangun ruang 2 dimensi (tidak hanya garis seperti di polyline) setelah kita mendefinisikan titik-titik koordinat di Google Maps. Contoh penggunaan polygon ini misalnya untuk menggambarkan BTS coverage milik operator seluler, menampilkan area marketing, memetakan daerah kekuasan preman J , dll. Cara menampilkan polygon di google Maps sangat mudah, yakni dengan memanggil function ‘google.maps.Polygon’ dengan parameter-parameter sama persis dengan ‘google.maps.Polygline’. Berikut ini adalah contoh script-nya

//menampilkan polygon
var cimahi = new google.maps.LatLng(-6.884082,107.541304);
var soreang = new google.maps.LatLng(-7.025202,107.525908);
var btscoverage = new google.maps.Polygon({
 path: [bandung, cimahi, soreang],
 strokeColor: "#0000F7",
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: "#0000F7",
 fillOpacity: 0.3
});
btscoverage.setMap(map);

download source code selengkapnya

Catatan: perhatikan bahwa untuk mendefinisikan polygon, titik koordinat terakhir boleh tidak sama dengan titik koordinat awal.

[AdSense-A]

Berikut ini adalah hasil eksekusi semua source code javascript di atas dalam file html di atas

Demikian sedikit tutorial mengenai cara menampikan lingkaran, polyline dan polygon di google maps, semoga bermanfaat untuk Anda. Untuk mengeksekusi script di atas di web lokal (localhost), Anda harus menginstal web server terlebih dahulu di komputer Anda. Salah satunya adalah XAMPP, yakni program bundling web server Apache, database MySQL, web admin melalui phpmyadmin dan PHP5. Kemudian simpan file html di atas di folder ‘htdocs’ dan buka melalui web browser dengan alamat http://localhost/nama_folder/nama_file.html

Saptaji, ST. M.Tr.T

a Technopreneur – writer – Enthusiastic about learning AI, IoT, Robotics, Raspberry Pi, Arduino, ESP8266, Delphi, Python, Javascript, PHP, etc. Founder of startup Indomaker.com