Menggambar / Draw Circle (Lingkaran) pada Google Map (Pemrograman Web)

Sebelumnya kita sudah bisa menampilkan peta Google Map pada Web atau Blog dan Mencari Koordinat Suatu Titik Beserta Alamatnya. Nah sekarang bagaimana kita bisa menampilkan atau menggambar lingkaran pada peta yang sudah tampil tersebut. Misal untuk menggambar area atau radius dari suatu titik.

Di bawah ini adalah contoh radius area Letusan Gunung Merapi :

Kode Programnya 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: 12,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

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

  // Create marker
  //var marker = new google.maps.Marker({
  //  map: map,
  //  position: new google.maps.LatLng(53, -2.5),
  //  title: 'Some location'
  //});

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    map: map,
    radius: 3000,              //16093,    // 10 miles in metres
    fillColor: '#AA0000'
  });
  circle.bindTo('center', marker, 'position');

}

// 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 radius bisa dimasukkan radiusnya dalam meter, sehingga jika 5 km = 5000m dst. Bisa dimasukkan Warna lain, Opacity / Transparansi dan seterusnya.

Source Code selengkapnya dapat didownload disini. Klik, setelah masuk Google Docs klik File-Download.

Semoga Berguna.