Menggambar / Draw Line (Garis) pada Google Map

Selanjutnya setelah kita berhasil bisa menampilkan peta Google Map pada Web atau Blog dan Mencari Koordinat Suatu Titik Beserta Alamatnya serta Menggambar / Draw Circle (Lingkaran) pada Google Map. Sekarang saatnya menggambar Garis / Polyline yang melewati beberapa titik dengan ketebalan tertentu.

Di bawah ini adalah contoh area bahaya aliran lahar dingin pada sungai-sungai yang berada di sekitar Letusan Gunung Merapi :

Kode Program nya di bawah ini :




<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=id" type="text/javascript">
</script>

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function initialize() {
  var latLng = new google.maps.LatLng(-7.540388743904892, 110.44494428789062);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 11,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Puncak Gunung Merapi',
    map: map,
    draggable: true
  });

  var aliranLavaCoordinates = [
        new google.maps.LatLng(-7.540388743904892, 110.44494428789062),
        new google.maps.LatLng(-7.553321999015879, 110.45661726152343),
        new google.maps.LatLng(-7.56285151827589, 110.45318403398437),
        new google.maps.LatLng(-7.579187347294768, 110.45867719804687),
        new google.maps.LatLng(-7.588716294788372, 110.46897688066406),
        new google.maps.LatLng(-7.603689928463787, 110.4710368171875),
        new google.maps.LatLng(-7.633635627699367, 110.49232282792968)
    ];
    var aliranLava = new google.maps.Polyline({
      path: aliranLavaCoordinates,
      strokeColor: "#0000FF",
      strokeOpacity: 0.5,
      strokeWeight: 10
    });

   aliranLava.setMap(map);

}

// Onload handler to fire off the app.

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

  <style>
  #mapCanvas {
    width: 500px;
    height: 300px;
    float: left;
  }
</style>

  <br />
<div id="mapCanvas"></div>

Pada Parameter Polyline (Garis) bisa diubah ubah StrokeColor (warnanya), Stroke Opacity (Transparansinya) dan Weight (lebarnya).

Source Code selengkapnya dapat diunduh disini. Setelah masuk Google Docs silakan klik File - Download.

Semoga bermanfaat.