Cara Menggambar Lingkaran atau Circle di Google Maps

Jika sebelumnya kita sudah menggambar segitiga, kali ini kita akan belajar menggambar lingkaran atau circle di google maps. Lingkaran atau circle ini sebenarnya tidak jauh berbeda dengan sebelumnya hanya beberapa script yang berbeda sedikit. Circle ini dapat anda gunakan juga untuk menunjukan area seperti sebaran, area ledakan, area gempa dll. 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 circle_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 Circle 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>
  var citymap = {};
  citymap['bekasi'] = {
    center: new google.maps.LatLng(-6.243571, 107.148012),
    population: 5000
  };
  citymap['depok'] = {
    center: new google.maps.LatLng(-6.397809, 106.839022),
    population: 7000
  };
  citymap['jakarta'] = {
    center: new google.maps.LatLng(-6.217632, 106.837649),
    population: 12000
  };
  citymap['bogor'] = {
    center: new google.maps.LatLng(-6.592929, 106.784090),
    population: 10000
  };

  var cityCircle;
 
  function initialize() {
     var mapOptions = {
   zoom: 10,
   center: new google.maps.LatLng(-6.397809, 106.839022),
   mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);
     
    for (var city in citymap) {
   var populationOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     map: map,
     center: citymap[city].center,
     radius: Math.sqrt(citymap[city].population) * 100
   };
   // Add the circle for this city to the map.
   cityCircle = new google.maps.Circle(populationOptions);
    }

  }

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

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Menggambar Circle 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 citymap = {};
  citymap['bekasi'] = {
    center: new google.maps.LatLng(-6.243571, 107.148012),
    population: 5000
  };
  citymap['depok'] = {
    center: new google.maps.LatLng(-6.397809, 106.839022),
    population: 7000
  };
  citymap['jakarta'] = {
    center: new google.maps.LatLng(-6.217632, 106.837649),
    population: 12000
  };
  citymap['bogor'] = {
    center: new google.maps.LatLng(-6.592929, 106.784090),
    population: 10000
  };

var citymap ini berisi array dari koordinat setiap titik tengah lingkaran yang kita buat, sedangkan index population yang di dalamnya adalah ukuran lingkaran yang kita buat.

for (var city in citymap) {
   var populationOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     map: map,
     center: citymap[city].center,
     radius: Math.sqrt(citymap[city].population) * 100
   };
   // Add the circle for this city to the map.
   cityCircle = new google.maps.Circle(populationOptions);
    }

Script berfugsi untuk mengekstrak setiap kordinat dari array citymap, jadi untuk setiap koordinat yang ada di dalam citymap dibuat lingkaran di atas map dengan settingan yang ada di var populationOptions.

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 Shapes Circle Google Maps di sini : CEK TKP

Lingkaran atau Circle di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.

1 komentar

Pakar TutorialMay 15, 2018 at 7:47 AM
Makasih Tutorialnya. Tapi mohon bantuan, bagaimana caranya agar kode HTML tersebut bisa di pasang di Blog? saya sudah coba tapi map-nya gak muncul cuma judunya saja. Makasih sebelumnya