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.
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.
- 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
- 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 © <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
- 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.
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 © <a href="http://bosstutorial.com">BossTutorial (Kumpulan Tutorial Lengkap)</a> 2018</p>
</div>
</body>
</html>
Maka hasilnya akan tampak seperti gambar di bawah ini
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.
Contoh Peta Indonesia
Peta Indonesia ini bisa dipisahkan berdasarkan propinsi, jadi kita bisa memberi warna yang berbeda pada setiap propinsi. Untuk mengganti warnanya Anda bisa menggunakan PowerPoint atau Microsoft Word.
Link Download Map Indonesia yang bisa diedit, KLIK DI SINI!
Terimakasih sudah mampir ke blog BossTutorial.com, jangan lupa untuk like dan mengikuti blog ini.
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.
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.
- 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
- 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 © <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
- 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.
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 © <a href="http://bosstutorial.com">BossTutorial (Kumpulan Tutorial Lengkap)</a> 2018</p>
</div>
</body>
</html>
Maka hasilnya akan tampak seperti gambar di bawah ini
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.
Contoh Peta Indonesia
Peta Indonesia ini bisa dipisahkan berdasarkan propinsi, jadi kita bisa memberi warna yang berbeda pada setiap propinsi. Untuk mengganti warnanya Anda bisa menggunakan PowerPoint atau Microsoft Word.
Link Download Map Indonesia yang bisa diedit, KLIK DI SINI!
Terimakasih sudah mampir ke blog BossTutorial.com, jangan lupa untuk like dan mengikuti blog ini.
Thanks for reading: Cara Membuat Radius Lingkaran di Peta Map Google
7 Komentar
misi om mau nanya untuk membuat radius 30KM popultion di bikin berapa yah?
BalasHapusTerima kasih om sebelumnya
@Rahman DomiliCoba aja dengan angka 1000 entar hasilnya tinggal ukur menggunakan google map
BalasHapusHalo pak..bagaimana cara itung angka di populasi yg tepat.. misal saya mau buat radius 1km 3km dan 5km terima kasih
BalasHapusLingkaran biru pada google maps mau saya rubah agar jangkauan real time lokasi saya bisa lebih lebar meskipun pada saat saya berjalan bagaimana ya?
BalasHapusAdakah apk atau aplikasi yang mendukung untk problem saya diatas, email saya wiwid.sunnandi1340@gmail.com
Terima kasih sebelumnya mudah2xan dapat dijawab, karena tidak ada satupun yang dapat menjawab perranyaan saya.
Umumnya mereka menyarankan hp saya di root dulu...🙏🙏🙏
Hi Gan,
BalasHapusApakah bisa cara yang dijelaskan diatas berdasarkan data tabel, misal saya dalam 7 hari memiliki 7 koordiant yang bebeda, dan source code akan membaca jumlah dari data tabel yang ada? bisa memberikan contoh? atau menghitung radius dari 7 hari tersebut dengan titik koordinat berbeda. Thanks
terima kasih banyak mas, sangat membantu thesis saya.. saya coba dl ya
BalasHapusScriptnya htmlnya saja dibuka tidak muncul
BalasHapus