Cara Membuat Radius Lingkaran di Peta Map Google




Bagi anda yang ingin membuat radius berupa lingkaran dari titik pusat sebuah lokasi untuk keperluan sesuatu seperti untuk PPDB (Penerimaan Peserta Didik Baru) dengan sistem Radius Zona, radius daerah gempa, radius jangkauan sinyal, dan lain sebagainya, berikut ini saya akan berbagi bagaimana langkah-langkahnya cara membuat radius lingkaran di Google Maps.

Cara Membuat Radius Lingkaran Circle di Google Maps

Karena dalam membuat radius lingkaran ini yang akan menjadi titik pusatnya adalah sebuah tempat, maka sebelumnya anda harus menentukan latitude dan longitude (kordinat) dari tempat tersebut.


Cara mengetahui latitude dan longitude 

Cara mudah untuk mengetahui kordinat dari sebuah titik lokasi di Google Maps adalah sebagai berikut:

  • Buka Google Maps, atau silakan klik link berikut: https://www.google.com/maps/
  • Ketikan dengan lengkap nama lokasi yang ingin anda ketahui titik kordinatnya, pada jendela yang muncul di halaman Google Maps.
Cara mudah Mengetahui titik kordinat Latitude dan Longitude dengan google maps

  • Klik ikon Telusuri yang bergambar kaca pembesar atau tekan enter
  • Perhatikan di layar, jika Google Maps sudah tepat menampilkan lokasi yang anda ketikan tadi, perhatikan di address bar
Cara Mengetahui titik kordinat Latitude dan Longitude

  • Pada contoh di atas latitude dan longitude (kordinat) untuk SMP NEGERI 1 GUNUNGPUTRI KABUPATEN BOGOR JAWA BARAT adalah -6.4246581,106.9455937
  • Silakan copy atau catat angka latitude dan longitude (kordinat) tersebut.
  • Silakan simpan di Notepad atau di Word





Cara Membuat Radius Lingkaran di Peta Google Maps

Selanjutnya setelah kita mengetahui titik kordinat lokasi yang akan menjadi pusat radius lingkaran, berikut adalah langkah-langkah yang harus kita lakukan
  • Silakan buka aplikasi Notpade atau aplikasi editor HTML lainnya
  • Silakan copy kode script HTML di bawah ini ke Notepad

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Radius PPDB SMP Negeri 1 Gunungputri</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['smp negeri 1 gunungputri'] = {
    center: new google.maps.LatLng(-6.4246581,106.9455937),
    population: 625
  };
  
  var cityCircle;
  
  function initialize() {
     var mapOptions = {
   zoom: 13,
   center: new google.maps.LatLng(-6.4246581,106.9455937),
   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>CARA MEMBUAT RADIUS LINGKARAN  ATAU CIRCLE DI GOOGLE MAPS</h1>
  <h1>Radius 5 (2500 meter)</h1>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://bosstutorial.com">BossTutorial (Kumpulan Tutorial Lengkap)</a> 2018</p>
 </div>
  </body>
</html>





Penjelasan Code Script Radius atau Circle di Google Maps

Teks yang berwarna merah silakan anda ganti sesuai dengan tujuan anda. Misalnya pada bagian:
  • <title>Radius PPDB SMP Negeri 1 Gunungputri</title> Ini adalah Judul yang tampil di atas. Silakan anda ganti
  • citymap['smp negeri 1 gunungputri'] = Ganti dengan titik pusat lokasi yang akan dibuat radiusnya
  • center: new google.maps.LatLng(-6.4246581,106.9455937), Ganti dengan latitude dan longitude (titik kodinat) lokasi anda
  • population: 625 Ganti dengan panjang jari-jari lingkaran (radius) yang anda linginkan 
  • <h1>CARA MEMBUAT RADIUS LINGKARAN ATAU CIRCLE DI GOOGLE MAPS</h1> Ini adalah judul utama yang akan muncul pada baris pertama di atas peta, silakan ganti sesuai tujuan dan kebutuhan anda
  • <h1>Radius 5 (2500 meter)</h1>  Ini adalah judul yang muncul di baris kedua di bawah judul utama
Untuk teks yang diberi warna biru, boleh diganti atau tidak pun tidak masalah. Misalnya pada:
  • zoom: 10 Maksudnya tampilan zoom Google Maps saat pertama anda buka, jika dirasa menurut anda terlalu kecil silakan diubah, misalnya zoom jadi: 13
  • strokeColor: '#FF0000', Ini adalah warna garis lingkaran radius, kode #FF0000 adalah warna pink. Jika menginginkan dengan warna lain silakan cari di internet daftar kode warna untuk HTML. 




Setelah dilakukan pengeditan pada bagian-bagian kode script yang berwarna merah dan biru, lakukan langkah berikutnya:
  • Silakan simpan script di atas dengan extention .html 
  • Misalnya anda menyimpannya di My Document, dengan nama file: Radius_PPDB_2018.html
  • Silakan buka file html tersebut menggunakan Google Chrome (disarankan) atau Mozilla
  • Chrome akan langsung menampilkan Radius atau Circle Google Maps, seperti di bawah ini.
Tutorial Cara Menggambar Radius lingkaran di Google Maps


    Cara Membuat Beberapa Radius Lingkaran di Map Google

    Bila anda ingin membuat beberapa radius lingkaran di peta Google, silakan gandakan kode script pada bagian berikut ini.

    var citymap = {};
      citymap['smp negeri 1 gunungputri'] = {
        center: new google.maps.LatLng(-6.4246581,106.9455937),
        population: 625
      };

    Misalnya anda ingin membuat radius lingkaran  Jakarta, Kota Bogor, Depok, Tangerang dan Bekasi, maka susunan kode scriptnya akan seperti ini

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Cara Membuat Radius Lingkaran di Google Map</title>
        <style>
       html { height: 100% }
       #map-canvas { height: 400px;}
       *{
       margin: 0;
       padding: 0;
      }
      body {
       text-align:center;
       background-color:#F5F5DC;
       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['jakarta'] = {
        center: new google.maps.LatLng(-6.217632, 106.837649),
        population: 15000
      };
      citymap['bogor'] = {
        center: new google.maps.LatLng(-6.4246581,106.9455937),
        population: 7500
      };
      citymap['depok'] = {
        center: new google.maps.LatLng(-6.3878438,106.747757),
        population: 5000
      };
      citymap['tangerang'] = {
        center: new google.maps.LatLng(-6.176683,106.5799935),
        population: 3000
      };
      citymap['bekasi'] = {
        center: new google.maps.LatLng(-6.243571, 107.148012),
        population: 2000
      };
      
      var cityCircle;
      
      function initialize() {
         var mapOptions = {
       zoom: 10,
       center: new google.maps.LatLng(-6.3878438,106.747757),
       mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
         mapOptions);
          
        for (var city in citymap) {
       var populationOptions = {
         strokeColor: '#00FFFF',
         strokeOpacity: 0.8,
         strokeWeight: 2,
         fillColor: '#00FFFF',
         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>CARA MEMBUAT RADIUS LINGKARAN  ATAU CIRCLE DI GOOGLE MAPS</h1>
      <h1>Lima Radius di Jabodetabek</h1>
      <div id="map-canvas"></div>
      <p class='copy'>Copyright &copy <a href="http://bosstutorial.com">BossTutorial (Kumpulan Tutorial Lengkap)</a> 2018</p>
     </div>
      </body>
    </html>



    Maka hasilnya akan tampak seperti gambar di bawah ini


    Cara Membuat beberapa Gambar Radius lingkaran Circle di Google Maps


    Demikian tutorial cara Membuat Radius Lingkaran atau Circle di Googlr Maps, semoga tutorial ini ada manfaatnya, jika ada kritik atau pertanyaan, silakan tiliskan dalam komentar. Dengan senang hati BossTutorial akan membalas secepat yang kami bisa.

    Terimakasih sudah mampir ke blog BossTutorial.com, jangan lupa untuk like dan mengikuti blog ini.



    Previous
    « Prev Post

    Artikel Menarik Lainnya

    Cara Membuat Radius Lingkaran di Peta Map Google
    4/ 5
    Oleh

    2 comments

    7 October 2018 at 13:36 delete

    misi om mau nanya untuk membuat radius 30KM popultion di bikin berapa yah?

    Terima kasih om sebelumnya

    7 October 2018 at 17:49 delete

    @Rahman DomiliCoba aja dengan angka 1000 entar hasilnya tinggal ukur menggunakan google map

    Post a Comment