Selamat siang sobat, pada tutorial sebelumnya saya telah membagikan bagaimana cara membuat marker dengan data yang ada di database. Dalam tutorial kali ini saya akan membagikan bagaimana cara mengelompokkan marker sesuai dengan wilayahnya. Marker yang kita gunakan adalah Marker Clusterer . Angka pada cluster menunjukkan berpa banyak marker yang ada di dalamnya. Perhatikan bahwa saat anda memperbeser lokasi cluster mana pun, jumlah cluster semakin sedikit dan kalian mulai melihat masing-masing marker pada peta. Memperkecil peta akan menggabungkan marker ke dalam cluster lagi. Mungkin itu sedikit penjelasan mengenai Marker Clusterer, Langsung saja ikuti langkah-langkah di bawah ini :
1. Buat database baru dengan nama web_gis
2. Kemudian buat tabel baru dengan nama tk
3. Salanjutnya isikan tabel tersebut dengan data, di sini saya mengisinya dengan data tk yang ada di kecamatan pelaihari.
4. Setelah membuat database kita memerlukan file kml. dalam tutorial sebelumnya saya telah memberikan tutorial mengenail file kml silahkan baca di sini.
5. kemuidan buat file config.php dan copykan source code di bawah ini :
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'tb_gis';
mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
?>
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'tb_gis';
mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
?>
6. kemudian buat file index.php dan copykan source code di bawah ini, dan masukkan API Key kalian, jika belum ada ikuti langkah-langkahnya di sini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: -3.7990165,
lng: 114.779605
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.dropbox.com/s/yt9g15wh3ml24zt/pelaihari%20%282%29.kml?dl=1',
zoom:18,
map: map
});
var infoWin = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
<?php include("config.php"); ?>
<?php
$sql = mysql_query("SELECT * from tk"); // query memilih entri nik pada database
if(mysql_num_rows($sql) == 0){
header("Location: index.php");
}else{
while($row = mysql_fetch_assoc($sql)){
echo'
{lat: '.$row['lat'].', lng: '.$row['lng'].',info:"'.$row['nama'].'",icon:"'.$row['icon'].'"},
';
}
}
?>
];
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API Key
&callback=initMap" async defer ></script>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: -3.7990165,
lng: 114.779605
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.dropbox.com/s/yt9g15wh3ml24zt/pelaihari%20%282%29.kml?dl=1',
zoom:18,
map: map
});
var infoWin = new google.maps.InfoWindow();
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var locations = [
<?php include("config.php"); ?>
<?php
$sql = mysql_query("SELECT * from tk"); // query memilih entri nik pada database
if(mysql_num_rows($sql) == 0){
header("Location: index.php");
}else{
while($row = mysql_fetch_assoc($sql)){
echo'
{lat: '.$row['lat'].', lng: '.$row['lng'].',info:"'.$row['nama'].'",icon:"'.$row['icon'].'"},
';
}
}
?>
];
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API Key
&callback=initMap" async defer ></script>
</body>
</html>
7. Kemudain buka di browser kalian maka akan tampil seperti gambar di bawah ini.
Sekian tutorial kali ini semoga bermanfaat, jagan lupa share dan berikan komentar yang membangun, dan nantikan tutorial berikutnya dari TEKINFORM, Terima Kasih
0 Comments
EmoticonEmoticon