Membuat Polyline Pada Google Map

AUTHOR

Apa itu Polyline?

Polyline adalah geometri garis yang lebih dari sepenggal, sehingga dapat diartikan polyine adalah jamak dari line yaitu geometri yang tersusun lebih dari satu garis(line). Geometri polyline ini umumnya digunakan untuk merepresentasikan objek-objek yang memiliki panjang seperti jalan, pipa, jalur terbang, rel kereta api, bentangan kabel listrik, batas administrasi dan lain sebagainya.

Membuat Polyline di Google Map

Untuk membuat polyline di Google Maps dapat dilakukan dengan mendeklarasikan objek Polyline tersebut, contohnya seperti pada penggalan kode di bawah.
var polyline=new google.maps.Polyline({
  path:list objek koordinat,
  strokeColor:"kode warna",
  strokeOpacity: nilai transparansi ,
  strokeWeight:lebar
  });
Pada penggalan kode di atas dapat dilihat bahwa untuk membuat polylne diperlukan beberapa properti yatu:
  • path: merupakan properti berisi list koordinat dari polyline yang akan dibentuk
  • strokeColor: berisi kode warna html untuk polyline
  • strokeOpacity: menentukan nilai transparansi dengan skala 0-1
  • strokeWeight: Lebar garis
Kode dibawah adalah contoh lengkap untuk membuat polyline dan menampilkannya di google map. Hasil running kode ini dapat dilihat pada gambar 1.
<!DOCTYPE html>
<html>
  <head>
 <script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
      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_rute=new google.maps.Polyline({
  path:rute_terbang,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
  });
poly_rute.setMap(map);
      }
      google.maps.event.addDomListener(window,'load',initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:700px;height:500px" />
  </body>
</html>
Download Kode

Tampilan Polyline pada Google Map
Gambar 1. Tampilan Polyline pada Google Map

Penjelasan Kode

  • Bagian terpenting pada listing kode lengkap di atas adalah bagian yang dengan font tebal (bold). Untuk membuat polyline dibutuhkan koordinat-koordinat yang akan menjadi pembentuk garis dari polyne tersebut. Untuk itu dibuat tiga variabel dengan nama blang, bna dan pidie yang merupakan objek point yang berisikan nilai koordinat.
  • Variabel rute_terbang merupakan list yang berisi koordinat dari tiga varibel koordinat sebelumnya.
  • Terakhir dibuat objek polylne dengan path-nya adalah list koordinat pada variabel rute_terbang. Kemudian diatur juga properti-propteri yang lain berupa warna, transparansi dan tebal garis
Untuk membuat polygon diterangkan dalam tulisan berikut (Membuat Polygon pada Google Map). Dokumentasi lengkap tentang Google Maps API dapat ditemui di situs Google Developer.

Related Posts

Disqus Comments