Cara Menggambar Polygon atau Shape Di Google Maps - Kali ini kita akan belajar membuat polygon di google maps, Polygon merupakan gambar 2 dimensi yang di buat dengan menggabungkan titik - titik sudut atau biasa disebut dengan bangun datar. polygon pada maps digunkan untuk menunjukan suatu area wiliyah, sebagai contoh kali ini kita akan menggambar polygon segitiga untuk menunjukan wilayah segitiga bermuda ( bukan iluminasi yah bkakakakak ). 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 polygon_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 Polygon 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>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="wrap">
<h1>Jin Toples Programming</h1>
<h1>Menggambar Polygon di Google Maps</h1>
<div id="map-canvas"></div>
<p class='copy'>Copyright © <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
</div>
</body>
</html>
Perhatikan baris kode :
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
var triangleCoords ini berisi array dari koordinat titik yang anda gunakan untuk membuat polygon, dalam kasus ini kita membuat segitiga sehingga kita memerulkan 3 koordinat.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});var bermudaTriangle adalah objek polygon anda buat, disinilah tempat mengatur settingan dari polygon seperti warna garis, warna background, transparansi background, dll.
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 Polygon Google Maps di sini : CEK TKP
Polygon atau Shape Di Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.
Tidak ada komentar:
Posting Komentar