Laboratorium Kimia Komputasi Gedung D8 Lantai 3 +62818294312 kasmui@mail.unnes.ac.id

HTML Untuk Peta Arah Kiblat

Ingin membuat peta arah kiblat di website sendiri? Mudah deh… asal memiliki nama domain dan space hosting atau bisa juga menggunakan subdomain dan space hoting gratisan. Silahkan ikuti langkah-langkah sebagai berikut:

1. Buatlah nama direktori atau folder di domain anda, misal kiblat
2. Copy kode blok di bawah (download: kiblat.zip) dan simpan di folder atau direktori kiblat tadi, simpan dan beri nama misalnya index.html
3. Akseslah melalui browser nama folder dan file index.html-nya. Misal akses di http://blogchem.com/kiblat/

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Peta Arah Kiblat</title>
<link rel=”shortcut icon” href=”http://blogchem.com/shalat/kubahmua.png”>

<meta name=”description” content=”Penentuan Arah Kiblat” />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<style>
#radius1 {
border: 1px solid grey;
padding: 3px;
border-radius: 8px;
}

#radius2 {
border: 2px solid red;
padding: 10px;
border-radius: 50px 20px;
}
</style>
</head>
<body>
<div align=”center” id=’wrap’>
<h1>PETA ARAH KIBLAT</h1>

<div align=”center” id=’content’>

<script type=”text/javascript” src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAATj04FZVxMmpwYZm05sLxKzUd7YVb8Jw&sensor=false”></script>

<script type=”text/javascript”>
var ketinggian;
var myLatlng = new google.maps.LatLng(-7.06744, 110.40260)
var map, marker1, marker2
var geocoder;
var _qiblaLat = 21.42252, _qiblaLng = 39.82621, _lineDirKib
var mecca = new google.maps.LatLng(_qiblaLat, _qiblaLng);

function init() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 12,
//streetViewControl: true,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
}

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
ketinggian = new google.maps.ElevationService();

var elevator = new google.maps.ElevationService;
var infowindow = new google.maps.InfoWindow({map: map});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var script = document.createElement(‘script’);
script.setAttribute(
‘src’,
‘https://storage.googleapis.com/mapsdevsite/json/quakes.geo.json’);
document.getElementsByTagName(‘head’)[0].appendChild(script);

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

// Add a basic style.
map.data.setStyle(function(feature) {
var mag = Math.exp(parseFloat(feature.getProperty(‘mag’))) * 0.1;
return /** @type {google.maps.Data.StyleOptions} */({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: mag,
fillColor: ‘#f00’,
fillOpacity: 0.35,
strokeWeight: 0
}
});
});

_lineDirKib = new google.maps.Polyline({
strokeColor: “#FF0000”,
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
zIndex : 2
});

_lineDirKib.setMap(map);

marker1 = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
});

google.maps.event.addListener(map, ‘click’, function(event) {
marker1.setPosition(event.latLng); TulisLetak(event.latLng)
});
google.maps.event.addListener(marker1, ‘dragend’, function() {
TulisLetak(marker1.getPosition());
});

map.addListener(‘click’, function(event) {
displayLocationElevation(event.latLng, elevator, infowindow);
});

TulisLetak(myLatlng)
}

function eqfeed_callback(data) {
map.data.addGeoJson(data);
}

function displayLocationElevation(location, elevator, infowindow) {
// Initiate the location request
elevator.getElevationForLocations({
‘locations’: [location]
}, function(results, status) {
infowindow.setPosition(location);
if (status === ‘OK’) {
// Retrieve the first result
if (results[0]) {
// Open the infowindow indicating the elevation at the clicked position.
infowindow.setContent(‘Ketinggian:<br>’ +
results[0].elevation.toFixed(2) + ‘ m.’);
} else {
infowindow.setContent(‘No results found’);
}
} else {
infowindow.setContent(‘Elevation service failed due to: ‘ + status);
}
});
}

function TulisLetak(x)
{
document.getElementById(“lin”).value = x.lat().toFixed(5);
document.getElementById(“bj”).value = x.lng().toFixed(5);
document.getElementById(“tZone”).value = Math.round(x.lng()/15);
document.getElementById(“qibla”).value = kiblat(x.lat(), x.lng()).toFixed(2);
cariTinggi(x); garisKiblat(x)
}

function cariAlamat() {
var alamat = document.getElementById(“kota”).value;
geocoder.geocode( { ‘address’: alamat}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
marker1.setPosition(results[0].geometry.location);
TulisLetak(results[0].geometry.location);
}
else
{
alert(“pencarian gagal, sebab: ” + status);
}
});
}

function cariTinggi(x) {

var locations = [];

locations.push(x);
var positionalRequest = {
‘locations’: locations
}

ketinggian.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {

if (results[0]) {
//tampilkan hasil
document.getElementById(“h”).value = Math.round(results[0].elevation)
} else {
alert(“Ketinggian tidak didapat”); document.getElementById(“h”).value = “0.0”
}
} else {
alert(“Gagal mencari ketinggian karena : ” + status); document.getElementById(“h”).value = “0.0”
}
});
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/kiblat”;
}

function saveCookie() {
var nama = document.getElementById(“lin”).value
nama = nama + “,” + document.getElementById(“bj”).value
nama = nama + “,” + document.getElementById(“h”).value
nama = nama + “,” + document.getElementById(“tZone”).value

createCookie(“pos”, nama, 365)

nama = document.getElementById(“kota”).value
createCookie(“Tempat”, nama, 365)

alert(“Data lokasi telah disimpan!”)
}

function radToDeg(angleRad)
{
return (180.0 * angleRad / Math.PI);
}

function degToRad(angleDeg)
{
return (Math.PI * angleDeg / 180.0);
}

function getDirection(lat1, lng1, lat2, lng2)
{
var dLng = lng1- lng2;
return radToDeg(getDirectionRad(degToRad(lat1), degToRad(lat2), degToRad(dLng)));
}

function getDirectionRad(lat1, lat2, dLng)
{
return Math.atan2(Math.sin(dLng), Math.cos(lat1)* Math.tan(lat2)- Math.sin(lat1)* Math.cos(dLng));
}

function kiblat(lat, lng)
{
var qiblaDir = -getDirection(lat, lng, _qiblaLat, _qiblaLng);
if (qiblaDir < 0) {qiblaDir = qiblaDir + 360}
return qiblaDir
}

function garisKiblat(x){
var path = _lineDirKib.getPath()
if (path.length == 2){path.pop(); path.push(x)} else {
path.push(mecca); path.push(x)
}
}

window.onload = function(){init();}
</script>
<br/><br/>
<table align=”left” cellspacing=”1″ cellpadding=”1″ width=”50%” id=”radius1″>
<tr>
<td>Nama Kota </td>
<td><input type=”text” id=”kota” placeholder=”Nama tempat atau koordinat”/><input type=”button” value=”Cari” onclick=”cariAlamat()”/></td>
</tr>
</table>
<br/><br/><br/>
<div align=”center” id=”map_canvas” style=”width: 100%; height: 370px;”></div>
<br/>

<table align=”left” cellspacing=”1″ cellpadding=”1″ width=”50%” id=”radius1″>
<tr>
<td>Arah Kiblat</td>
<td><input type=”text” id=”qibla” /></td>
</tr>
<tr>
<td>Lintang</td>
<td><input type=”text” id=”lin” /></td>
</tr>
<tr>
<td>Bujur</td>
<td><input type=”text” id=”bj” /></td>
</tr>
<tr>
<td>Ketinggian(m)</td>
<td><input type=”text” id=”h”></td>
</tr>
<tr>
<td>Zona waktu </td>
<td><input type=”text” id=”tZone”></td>
</tr>
<tr>
<td colspan=”2″><br/>
<input type=”button” value=”Save Data” onclick=”saveCookie()”/>

</td>
</tr>
</table>
</div>
<br/>
<table style=”text-align: justify” cellspacing=”1″ cellpadding=”1″ width=”100%”>
<tr>
<td>
<h3>Ketentuan</h3>
<p>Dalam menentukan lokasi anda dapat click pada peta untuk menempatkan penanda. Bila letak penanda belum tepat, drag-drop (geser-taruh) menanda ke tempat yang tepat. </p>
<p>Cara yang paling mudah untuk menentukan lokasi adalah mengetik kota tempat anda tinggal. Misalnya <strong>Jakarta</strong>. atau lebih spesifik lagi <strong>Jakarta, jalan salemba. </strong>Kemudian tekan tombol cari. Aturlah pembesaran peta (zoom level) sesuai agar object yang dimaksud (misalnya jalan Salemba) dapat terlihat. </p>
<p>Lintang dan Bujur akan otomatis dihitung. Ketinggian dan Zona waktu otomatis akan terisi pula, tapi masih merupakan perkiraan. Edit dengan harga ketinggian dan Zona waktu dengan harga yang sesuai bila anda mengetahui harga yang lebih tepat.</p>
<p>Jangan Lupa save data sebelum keluar dari halaman ini!! </p>
<h3>Catatan</h3>
<p>Ketinggian dan zona waktu digunakan untuk menghitung jam sholat. Sedang untuk menghitung arah kiblat kedua besaran tadi tidak berpengaruh.</p>
<p>Garis merah pada peta memperlihatkan arah kiblat. Garis itu terhubung dengan kota Mekah. Garis tersebut terlihat melengkung karena garis tersebut merupakan lingkaran besar! </p>
</td>
</tr>
</table>

</div>

<div id=”footer”>Powered by Kasmui</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Read previous post:
Penggunaan Google Chart

1 Contoh Kasus Staped Chart Dibawah ini terdapat contoh kasus dalam penggunaan stepped pada html,...

Close