Menampilkan
Data Database pada Alert dan Menggunakan Fungsi Presisi Longtitute
Tugas
empat kali ini masih menyambung dari tugas ketiga sebelumnya. Nama pemilik
rumah, alamat pemilik rumah yang telah disimpan dalam MySQL sekarang coba
ditampilkan kedalam peta. Ketika marker dikilik, akan muncul alert yang
menampilkan nama pemilik rumah dan alamat pemilik rumah. sedangkan untuk
longitude, digunakan presisi (fungsi round) untuk membulatkan angka dibelakang
kom (enam angka dibelakang koma). Berikut adalah data yang telah disimpan pada
MySQL.
Kontainer
peta yang telah dibuat pada tugas tiga kemudian ditambahkan button show dan
hide untuk menampilkan dan menyembunyikan peta.
|
<html>
<head>
<title></title>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script
src="jquery.js"></script>
<script
src="maps.js"></script>
</head>
<body>
<div id="petaku" style="width:600px;
height:500px">
</div>
<button type="button"
id="showHide">Hide</button>
</body>
</html>
|
Kode
Program 1 Kontainer Peta dengan Button Show Hide
Langkah selanjutnya adalah menambahkan kode program pada file
simpandata.php untuk membulatkan nilai
longitude menjadi enam angka dibelakang koma dan menyimpan data dalam bentuk
array kemudian menampilkan data tersebut pemilik rumah ketika sebuah marker
di klik (pada file maps.js).
|
<?php
error_reporting(0);
$host =
"localhost";
$username =
"root";
$password = "";
$namadatabase =
"db_pemetaan"; //tiga baris kode program diatas merupakan koneksi ke
database db_pemetaan
$koneksi =
mysql_connect($host,$username,$password) or die("koneksi
gagal".mysql_error()); //notifikasi jika koneksi gagal
mysql_selectdb($namadatabase,$koneksi)
or die("Database Error".mysql_error());
if($_REQUEST['r']=="alamat")
{
$lati=$_REQUEST['lat']*1000000;
$latint=round($lati);
$latraw=$latint/1000000;
//echo $latraw;
$longi=$_REQUEST['lng']*1000000;
$longint=round($longi);
$longraw=$longint/1000000;
echo "Latitute : ".$latraw." dan
Longtitute : ".$longraw."
"; //menampilkan dan membulatkan nilai longitude menggunakan
fungsi round
$response=mysql_query("SELECT Alamat_Pemilik,
Nama_Pemilik FROM tb_pemetaanrumah WHERE Latitute=".$latraw." AND
Longtitute=".$longraw);
//menngambil nama dan alamat pemilikdari database
$arr=array();
while($b=mysql_fetch_array($response)) //nilai dari
nama dan alamat pemilik dihimpun dalam bentuk array dan ditampilkan ke alert
{
$arr[]=$b;
}
$encode=json_encode($arr);
$decode=json_decode($encode);
for($j=0;$j<count($decode);$j++)
{
echo "Nama_Pemilik :
".$decode[$j]->Nama_Pemilik."
"."Alamat Pemilik :
".$decode[$j]->Alamat_Pemilik;
}
}
else
{
$result = mysql_query("SELECT * FROM
tb_pemetaanrumah");
$data = array();
if (!$result) {
echo "Koneksi ke database gagal ! ";
exit;
}
if (mysql_num_rows($result) == 0) {
echo "Database kosong";
exit;
}
while ($row = mysql_fetch_array($result))
{
$data[]=$row;
}
echo json_encode($data);
}
?>
|
Kode
Program 2 Menyimpan Nama dan Alamat Rumah untuk Ditampilkan
pada Peta
Buat file JavaScript untuk membuat fungsi
menampilkan marker dan menambahkan event ketika marker diklik.
Event tersebut kan menampilkan sebuah alert yang menampilkan nama
pemilik rumah dan alamat pemilik rumah. Kode Program 3 adalah
menampilkan marker sesuai dengan latitude dan longtitude dan
melakukan event.
|
// JavaScript Document
$(document).ready(function(){
var
gmaps=google.maps;
var
arrMarker=[];
var
mapOptions={
zoom:
18,
//disableDefaultUI:true,
draggable:false,
center:new
gmaps.LatLng(-8.79359,115.158623)
}; //ini
menampilkan peta, dengan -8.79359,115.158623 sebagai centernya, jadi yang
muncul di peta hanya sekitaran latitude longitude itu.
map =
new
gmaps.Map(document.getElementById('petaku'),mapOptions);
//mengambil
peta tsb dan ditampilkan di kontainer
$.get('simpandata.php',function(output){
for(i=0;i<output.length;i++){
var marker = new gmaps.Marker({ //menampilkan
marker
position:new
gmaps.LatLng(output[i].Latitute,output[i].Longtitute),
map:map,
title:output[i].Alamat_Pemilik //menampilkan
informasi di window ketika kursor digeser ke arah marker, muncul data alamat
pemilik rumah
});
gmaps.event.addListener(marker,'click',function(event)
{
for(j=0;j<arrMarker.length;j++)
{
if(arrMarker[j].getPosition()==event.latLng)
{
$.get('simpandata.php?r=alamat&lat='+event.latLng.lat()+'&lng='+event.latLng.lng(),function(output)
{
alert(output);
});
//alert(event.latLng);
//arrMarker[j].setMap(null);
//arrMarker.splice(j,1);
break;
}
}
});
arrMarker.push(marker);
/*var
informasi=new google.maps.InfoWindow({
position:new
google.maps.LatLng(output[i].Latitute,output[i].Longtitute),
}); //membuat info
window
google.maps.event.addListener(marker,'click',function(event){
informasi.setPosition(event.latLng);
informasi.setContent(event.latLng.toString());
informasi.open(muncul);
//menampilkan informasi di window ketika marker di klik
});
*/
}
},'json');
var
isShow=true;
$('#showHide').click(function()
{
for(i=0;i<arrMarker.length;i++)
{
if(isShow)
{
arrMarker[i].setMap(null);
}
else
{
arrMarker[i].setMap(map);
}
}
isShow=!isShow;
});
});
|
Kode
Program 2 Menampilkan Marker dan Fungsi Event
0 komentar:
Posting Komentar