 |
Selmat Pagi sobat blogger, dalam tutorial kali ini saya akan membagikan cara membuat marker yang datanya berasal dari database. Di tutorial sebelumnya saya juga pernah menulis bagaimana cara membuat marker tetapi data koordinatnya kita tulis langsung di dalam source code htmlnya. Kalo data koordinatnya banyak pasti sangat merepotkan bukan. Dengan menggunakan database titik koordinatnya akan menyesuaikan pada data yang kita inputkan di database jadi kita tidak perlu lagi menuliskan titik koordinatnya pada source code htmlnya. Ok langsung saja ikuti langkah-langkah di bawah ini :
1. Langkah Pertama adalah nyalakan Xampp, Start Apache dan MySQl , Jika belum terinstal silahkan download disini.
2. Selanjutnya masuk ke localhost/phpmyadmin atau klik tombol admin mysql pada xampp, setelah kalian masuk buatlah database baru dengan nama db_gis
3. Buatlah Tabel baru dengan nama tb_lokasi dengan atribut sebagai berikut :
4. Kemudian isikan tabel tersebut dengan data koordianat, contoh :
5. Selanjutnya kita buat folder webgis di dalam folder htdoct dengan isi sebagai berikut :
6. Selanjutnya kita buat file config.php
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'db_gis';
$conn =
mysqli_connect($host,$user,$pass,$db);
if(!$conn){
die("Connection
Failed: ".mysqli_connect_error());
}
7. Kemudian buat satu file lagi dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title>Praktikum
1</title>
<meta
charset="utf-8"><!--parsing code-->
<meta
name="viewport" content="initial-scale=1.0"> <!--web
mobile-->
<style>
#map{/*
modifikasi element html yang ber-id map*/
height:
100%;
}
html,
body{
height:
100%;
margin:
0;
padding:
0;
}
</style>
</head>
<body>
<div
id="map"></div>
<script>
var
map;
function
initMap() {
<?php
include
"config.php";
$sql
= "SELECT * FROM tb_lokasi";
$result
= $conn->query($sql);
?>
//data
titik koordinat
var
locations = [
<?php
while
($row = $result->fetch_assoc()) {
echo
"['".$row['nama']."',".$row['garis_lintang'].",".$row['garis_bujur'].",'".$row['icon']."'],";
}
?>
];
map
= new google.maps.Map(document.getElementById('map'),{
center:
{lat: -3.7990165, lng: 114.779605},
zoom:
10
});
var
marker;
var
infowindow = new google.maps.InfoWindow();
for
(var i=0; i<locations.length; i++){
marker
= new google.maps.Marker({
position:
new google.maps.LatLng(locations[i][1],locations[i][2]),
icon
: locations[i][3],
map:
map
});
google.maps.event.addListener(marker,
'click', (function(marker, i){
return
function(){
infowindow.setContent(""+locations[i][0]);
infowindow.open(map,
marker);
}
})(marker,
i));
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=ISI KAN DENGAN API KEY KALIAN
&callback=initMap" async defer ></script>
</body>
</html>8. Jika sudah selesai maka buka di browser kalian dengan cara menuliskan localhost/webgis, maka akan tampil marker sesuai dengan data yang ada di dalam database kalian semakin banyak datanya semakin banyak pula marker yang akan tampil.
Selamat mencoba, semoga bermanfaat, sekian tutorial mengenai cara membuat marker dengan database, tunggu tutorial-tutorial berikunya dari TEKINFORM , Share jika tutorial ini bermanfaat bagi teman-teman.
0 Comments
EmoticonEmoticon