Dalam suatu peta tentu kita tidak asing lagi dengan yang namanya legenda. Legenda sendiri merupakan keterangan yang menjelaskan suatu titik yang ada di dalam peta. Sebagai contoh ada titik A pada peta, informasi pada titik tersebut tidak dapat di pahami oleh manusia yang bukan benar-benar ahli pada bidang pemetaan. Namun dengan adanya legenda, titik A tersebut dijelaskan sebagai Area Bebas Asap Rokok. Dalam google maps, legenda merupakan suatu kontrols yang tersedia dari library Maps API. Untuk melihat bagaimana implementasi google maps, silahkan perhatikan kode program berikut.
Kode berikut merupakan css dari html, anda bisa gunakan bootstrap dan font-awesome.
Selanjutnya adalah fungsi javascript dari google maps itu sendiri.
Kode javascript yang mendefinisikan icon yang akan tampil pada google maps ada lah pada baris 10-27 yaitu:
Fungsi untuk menampilkan marker dalam bentuk icon pada peta terletak pada baris 28-34.
Posisi setiap marker di simpan pada variabel feauture pada baris 35-82.
Seluruh posisis marker di jalankan pada fungsi addMarker menggunakan perulangan for.
 |
| Gambar 1 |
<html>
<head>
<title>Java-SC Demo Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 main">
<div class="row">
<div class="col-md-12 top">
<div class="col-md-8 kembali-ketutorial">
<a href="http://www.java-sc.web.id/2016/05/membuat-infowindow-dengan-infobox-di-google-maps.html"><i class="fa fa-arrow-circle-left fa-lg"></i> Kembali Ke Tutorial Membuat Legenda Pada Google Maps</a>
</div>
<div class="col-md-4 ketutorial">
<a href="http://www.java-sc.web.id/2016/05/menghapus-background-putih-info-window-pada-google-maps.html">Lihat Tutorial Sebelumnya <i class="fa fa-arrow-circle-right fa-lg"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h1>Tutorial Membuat Legenda Pada Google Maps</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="canvas"></div>
<div id="legend" class="panel panel-primary">
<div class="panel-heading">Legenda Peta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
<a href="www.java-sc.web.id">@ Java-Sc Developer</a>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('canvas'), {
zoom: 15,
center: new google.maps.LatLng(0.4761704, 101.4072038),
mapTypeId: 'roadmap'
});
var icons = {
parkir: {
name: 'Tempat Parkir',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Transport/parking-48.png'
},
perpustakaan: {
name: 'Perpustakaan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Business/reading-48.png'
},
sekolah: {
name: 'Sekolah dan Universitas',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Science/school-48.png'
},
hotel:{
name: 'Hotel dan Penginapan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Travel/hotel_information-48.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(0.4748103,101.3937338),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.472493,101.405836),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4693602,101.4158782),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4718419,101.4004494),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
},{
position: new google.maps.LatLng(0.479054, 101.400544),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.477209, 101.402368),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.483719, 101.411809),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.474231, 101.412224),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.475824, 101.404972),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.480553, 101.403926),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476400, 101.402821),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476100, 101.407633),
type: 'parkir'
},{
position: new google.maps.LatLng(0.464516, 101.398025),
type: 'hotel'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KODE_API&callback=initMap">
</script>
</body>
</html>
Kode berikut merupakan css dari html, anda bisa gunakan bootstrap dan font-awesome.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
Selanjutnya adalah fungsi javascript dari google maps itu sendiri.
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('canvas'), {
zoom: 15,
center: new google.maps.LatLng(0.4761704, 101.4072038),
mapTypeId: 'roadmap'
});
var icons = {
parkir: {
name: 'Tempat Parkir',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Transport/parking-48.png'
},
perpustakaan: {
name: 'Perpustakaan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Business/reading-48.png'
},
sekolah: {
name: 'Sekolah dan Universitas',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Science/school-48.png'
},
hotel:{
name: 'Hotel dan Penginapan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Travel/hotel_information-48.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(0.4748103,101.3937338),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.472493,101.405836),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4693602,101.4158782),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4718419,101.4004494),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
},{
position: new google.maps.LatLng(0.479054, 101.400544),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.477209, 101.402368),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.483719, 101.411809),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.474231, 101.412224),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.475824, 101.404972),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.480553, 101.403926),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476400, 101.402821),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476100, 101.407633),
type: 'parkir'
},{
position: new google.maps.LatLng(0.464516, 101.398025),
type: 'hotel'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=KODE_API&callback=initMap">
</script>
Kode javascript yang mendefinisikan icon yang akan tampil pada google maps ada lah pada baris 10-27 yaitu:
var icons = {
parkir: {
name: 'Tempat Parkir',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Transport/parking-48.png'
},
perpustakaan: {
name: 'Perpustakaan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Business/reading-48.png'
},
sekolah: {
name: 'Sekolah dan Universitas',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Science/school-48.png'
},
hotel:{
name: 'Hotel dan Penginapan',
icon: 'https://maxcdn.icons8.com/Color/PNG/48/Travel/hotel_information-48.png'
}
};
Fungsi untuk menampilkan marker dalam bentuk icon pada peta terletak pada baris 28-34.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
Posisi setiap marker di simpan pada variabel feauture pada baris 35-82.
var features = [
{
position: new google.maps.LatLng(0.4748103,101.3937338),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.472493,101.405836),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4693602,101.4158782),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4718419,101.4004494),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
}, {
position: new google.maps.LatLng(0.4717545,101.390259),
type: 'sekolah'
},{
position: new google.maps.LatLng(0.479054, 101.400544),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.477209, 101.402368),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.483719, 101.411809),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.474231, 101.412224),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.475824, 101.404972),
type: 'perpustakaan'
}, {
position: new google.maps.LatLng(0.480553, 101.403926),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476400, 101.402821),
type: 'parkir'
}, {
position: new google.maps.LatLng(0.476100, 101.407633),
type: 'parkir'
},{
position: new google.maps.LatLng(0.464516, 101.398025),
type: 'hotel'
}
];
Seluruh posisis marker di jalankan pada fungsi addMarker menggunakan perulangan for.
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
Bagaimana legenda ditampilkan, semua terletak pada baris kode 86 - 95.
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
Jadi legenda ditampilkan dalam tag html dengan id dari tag html tersebut adalah legend.
0 Komentar
Keep Learning and Keep Sharing