Cara Menggambar Garis atau Polylines Di Google Maps

Cara Menggambar Garis atau Polylines Di Google Maps - Kali ini kami akan menjelaskan cara menggambar garis di google maps, Dengan menggunakan API Google Maps memungkinkan kita untuk menggambar garis atau ploylines, garis ini di buat berdasarkan titik koordinat yang anda tentukan sendiri. Bebeda dengan direction yang garisnya harus melewati rute perjalananan karena ia adalah petunjuk jalan, plolylines dapat membuat garis sembarang tanpa mengikuti pola jalur maps, hal ini mungkin berguna untuk anda apabila ingin menandai dan menarik garis hubungan antar kordinat atau lokasi. Untuk lebih jelasnya langsung saja ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama line_map.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Menggambar garis di Google Maps</title>
    <style>
   html { height: 100% }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }
    }
    </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(-6.213682, 107.029548),
   mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    var mapCoordinates = [
   new google.maps.LatLng(-6.188557, 107.029908),
   new google.maps.LatLng(-6.187000, 107.019651),
   new google.maps.LatLng(-6.213682, 107.029548),
   new google.maps.LatLng(-6.223559, 107.009141)
    ];
    var mapPath = new google.maps.Polyline({
   path: mapCoordinates,
   geodesic: true,
   strokeColor: '#FF0000',
   strokeOpacity: 1.0,
   strokeWeight: 2
    });

    mapPath.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar garis di Google Maps</h1>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan baris kode :

var mapCoordinates = [
   new google.maps.LatLng(-6.188557, 107.029908),
   new google.maps.LatLng(-6.187000, 107.019651),
   new google.maps.LatLng(-6.213682, 107.029548),
   new google.maps.LatLng(-6.223559, 107.009141)
    ];

var mapCoordinates ini berisi array koordinat dari titik garis anda, tentu saja jika anda ingin menggambar garis anda membutuhkan minimal 2 titik atau 2 koordinat.

var mapPath = new google.maps.Polyline({
   path: mapCoordinates,
   geodesic: true,
   strokeColor: '#FF0000',
   strokeOpacity: 1.0,
   strokeWeight: 2
    });

    mapPath.setMap(map);

var mapPath adalah objek garis anda buat, disinilah tempat mengatur settingan dari garisnya, seperti ukuran garis, warna garis, transparansi garis, dll.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Simple Polylines Google Maps di sini : CEK TKP

Menggambar Garis atau Polylines Di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.