Friday, August 19, 2016

Membuat Polygon Pada Google Map

Apa itu Polygon?

Polygon adalah adalah geometri yang membentuk luasan, sehingga geometri ini umumnya digunakan untuk merepresentasikan objek-objek yang memiliki luasan seperti: badan air, desa, bangunan, persil tanah, petak sawah dan lain sebagainya. Pada dasarnya geometri polygon terdiiri dari titik-titik pembentuk polyline. Namun pada polygon titik awal dan titik akhir sama, sehingga membentuk polyline tertutup.

Pada posting sebelumnya telah dibahas cara membuat polyline pada google map, tentu ada yang bertanya bagaimana membuat polygon?

Membuat Polygon di Google Map

Untuk membuat polygon hampir sama dengan polyline, namun di sini yang dipanggil adalah objek polygon. Berikut penggalan kode untuk membuat objek polygon.
var polygon = new google.maps.Polygon({
  path: list objek koordinat,
  strokeColor:warna garis polygon
  strokeOpacity:transparansi garis
  strokeWeight:lebar garis
  fillColor:warna polygon
  fillOpacity:transparansi polygon
});
Pada penggalan kode di atas dapat dilihat struktur kode untuk membuat polygon hampir sama dengan polyline dengan dua properti tambahan yaitu:
  • fillColor: untuk menentukan warna polygon
  • fillOpacity: untuk mengatur transparansi polygon dengan skala 0-1
Kode dibawah adalah contoh untuk membuat dan menampilkan polygon pada google map. Kode tersebut merupakan kode modifikasi dari kode untuk polyline. Hasil eksekusi kode ini dapat dilihat pada gambar 1.
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100%; width:100%; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8
        };
  
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
 
  var blang=new google.maps.LatLng(4.001778,97.343417);
  var bna=new google.maps.LatLng(5.541320,95.372996);
  var pidie=new google.maps.LatLng(5.379189,95.955742);
  var rute_terbang=[blang,bna,pidie];
  
  var poly=new google.maps.Polygon({
  path:rute_terbang,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

  poly.setMap(map);
      }
      google.maps.event.addDomListener(window,'load',initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>
polygon pada google map
Gambar 1. Tampilan polygon pada google map
Demikianlah tutorial singkat tentang membuat polygon pada google map. Dokumentasi lengkap dapat ditemukan di situs google developer. Semoga bermanfaat.

0 comments :

Post a Comment