Membuat Garis pada Google Maps API ~ Pemetaan & GIS

Polyline pada google maps

Pada kesempatan ini, saya akan mencoba untuk membuat garis atau dalam dunia pemetaan lebih dikenal dengan feature line / polyline. Pembuatan garis ini biasanya digunakan untuk mengakomodasi kenampakan garis seperti sungai, jalan raya, batas daerah administrasi, kontur, jaringan pipa, maupun jaringan lainnya. Berikut langkah kerjanya ;

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-7.8032504,110.3748449),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

var oldtrackCoordinates = [
    new google.maps.LatLng(-7.7724238,110.3666052),
    new google.maps.LatLng(-7.7788657,110.3637728),
    new google.maps.LatLng(-7.7890811,110.3617558),
    new google.maps.LatLng(-7.7886453,110.3645667),
    new google.maps.LatLng(-7.7942472,110.3604683),
    new google.maps.LatLng(-7.8279716,110.3580649)
  ];
  var oldtrack = new google.maps.Polyline({
    path: oldtrackCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

oldtrack.setMap(map);
}

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

</script>
  </head>
  <body>
    <div id="map-canvas">
</div>
</body>
</html>

1. Copy code di atas lalu paste pada halaman text editor seperti notepad atau notepad ++
2. Simpan file dengan tipe data *.html
3. Buka dengan browser chrome atau mozilla yang support dengan plugin java
4. Apabila ingin mengganti posisi garis anda tinggal merubah nilai koordinat pada "var oldtrackCoordinates = [...]"
5. Ketebalan, warna, dan tipe garis dapat dirubah pada "var oldtrack = new google.maps.Polyline({...})"

Contoh Hasil Pembuatan Simple Polyline

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Pemetaan & GIS

Membuat Garis pada Google Maps API

About Admin

Related Post