Tag Archives: Arah Kiblat

Memasang Peta Arah Kiblat Di Web Sendiri

Berikut saya sertakan skrip untuk memasang peta arah kiblat di web sendiri. Silahkan buat folder sendiri, lalu masukkan skrip ini pada file tertentu.

<!DOCTYPE html>
<html>
<head>
<title>Garis Kiblat Kota Brebes</title>
<link rel=”SHORTCUT ICON” href=”http://www.kasmui.com/k.png”>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>
<meta charset=”utf-8″>
<link href=”https://developers.google.com/maps/documentation/javascript/examples/default.css” rel=”stylesheet”>
<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry”></script>
<script type=”text/javascript” src=”http://kasmui.com/shalat/date.js”></script>
<script type=”text/javascript” src=”http://kasmui.com/shalat/PrayTimes.js”></script>

<script>
var poly;
var geodesicPoly;
var marker1;
var marker2;

function initialize() {
var mapOptions = {
zoom: 15,
scaleControl: true,
panControl: true,

center: new google.maps.LatLng(-6.856442209356458, 109.0264172935485),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.MEDIUM
},
mapTypeId: google.maps.MapTypeId.HYBRID
};

var map = new google.maps.Map(document.getElementById(‘map’),
mapOptions);

map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById(‘info’));

var image = ‘penanda.png’;
marker2 = new google.maps.Marker({
map: map,
icon : image,
draggable: true,
position: new google.maps.LatLng(-6.856442209356458, 109.0264172935485),
title:’Lokal’
});

marker1 = new google.maps.Marker({
map: map,

draggable: false,
position: new google.maps.LatLng(21.42252, 39.82621),
title:’Awal: Kabah Mukaromah’
});

 

google.maps.event.addListener(marker1, ‘position_changed’, update);
google.maps.event.addListener(marker2, ‘position_changed’, update);

var polyOptions = {
strokeColor: ‘#DDDDDD’,
strokeOpacity: 1.0,
strokeWeight: 2,
map: map,
};
poly = new google.maps.Polyline(polyOptions);

var geodesicOptions = {
strokeColor: ‘yellow’,
strokeOpacity: 1.0,
strokeWeight: 2,
geodesic: true,
map: map
};
geodesicPoly = new google.maps.Polyline(geodesicOptions);

update();
}

function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
poly.setPath(path);
geodesicPoly.setPath(path);

var heading = google.maps.geometry.spherical.computeHeading(path[0],
path[1]);
document.getElementById(‘heading’).value = heading;
document.getElementById(‘origin’).value = path[0].toString();
document.getElementById(‘destination’).value = path[1].toString();

}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>

<script type=”text/javascript”>

</script>

</head>
<!– <body background=”http://kasmui.com/gb/kelabu2.gif”> –>
<body>
<center>
<table border=”1″ bordercolor=”#ffffff” align=”center” width=”100%” bgcolor=”#eeeeee”>
<tr>
<td width=”25%” valign=”top” border=”0″ bordercolor=”#ffffff” align=”center”>

<div align=”center”>
<a target=”_blank” href=”http://kasmui.com/jam/” title=”Klik di sini untuk melihat Fullscreen Clock”><font size=”3″>International Atomic Time</font></a>
<!–<a target=”_blank” href=”http://time.is/Semarang” id=”time_is_link” rel=”nofollow” style=”font-size:18px;color:hitam;background:putih” title=”Exact time for Semarang city”>Exact Time</a><br/>
<span id=”Semarang_z41c” style=”font-size:30px;color:darkgreen;background:putih”></span>
<script src=”http://widget.time.is/t.js”></script>
<script>
time_is_widget.init({Semarang_z41c:{}});
</script>

<iframe src=”http://free.timeanddate.com/clock/i5iy5c7z/n631/tlid38/fn4/ftb/tt0/th1/ta1/tb4″ frameborder=”0″ width=”100%” height=”50″></iframe>
–>
<iframe src=”http://free.timeanddate.com/clock/i5iy5c7z/n631/tlid38/fn4/ftb/tt1″ frameborder=”0″ width=”100%” height=”25″></iframe>
<iframe src=”http://free.timeanddate.com/clock/i5j1u0cx/n624/tlid38/fn4/fs24/fc009/ftb/ta1″ frameborder=”0″ width=”100%” height=”46″></iframe>

 

 

</div>

<div style=”width:98%;margin:0 auto;text-align:center”><img width=”100%” height=”300px” src=”http://www.al-habib.info/islamic-widget/muslim-prayer.php?&mpt_lat=-6.856442209356458&mpt_lng=109.0264172935485&mpt_tz=Asia%2FJakarta&mpt_sz=-20&mpt_iz=-18&mpt_loc=Brebes&mpt_w=215&mpt_dp=d&mpt_pre=1&mpt_cn=1&mpt_fq=Shafi&mpt_lang=Indonesia&mpt_thm=green” style=”border:0″ alt=”Waktu sholat untuk Kota Brebes Sekitarnya.” /></div>

<!–div style=”width:100%;margin:0 auto;text-align:center”><a href=”http://www.al-habib.info/islamic-widget/prayer-times.htm”><img width=”160″ src=”http://www.al-habib.info/islamic-widget/muslim-prayer.php?&mpt_lat=-6.847885799999999&mpt_lng=109.02363270000001&mpt_tz=Asia%2FJakarta&mpt_sz=-20&mpt_iz=-18&mpt_loc=Brebes&mpt_w=160&mpt_dp=d&mpt_pre=1&mpt_cn=1&mpt_fq=Shafi&mpt_lang=English&mpt_thm=black” style=”border:0″ alt=”Salat times for Brebes. Muslim Prayer Times Widget by Alhabib.” /></a><div style=”margin:0 auto;padding:3px;width:160px”><a style=”text-decoration:none;font-size:0.7em” href=”http://www.al-habib.info/islamic-widget/prayer-times.htm”>Get Your Prayer Times Widget!</a></div></div–>

<a href=”http://www.accuweather.com/id/id/brebes/202810/weather-forecast/202810″ class=”aw-widget-legal”></a>
<div id=”awcc1442447316871″ class=”aw-widget-current” data-locationkey=”202810″ data-unit=”c” data-language=”id” data-useip=”false” data-uid=”awcc1442447316871″></div>
<script type=”text/javascript” src=”http://oap.accuweather.com/launch.js”></script>
</td>
<td align=”center” width=”80%”>
<font color=”blue” size=”6″ style=”text-shadow: 1px 2px 1px #9A9696;”>Garis Kiblat Kota Brebes</font><br/>
<font color=”#333333″ size=”4″ >+ Sekitar Wilayah Kota Brebes<br/>Geser penanda kuning dan peta untuk melihat arah garis kiblat tempat lain</font>
<br/><br/>

<font color=”black” size=”2″>
<div align=”center”>
<font size=”2″ color=”red”>
Kabah: <input type=”text” readonly id=”origin”>&nbsp;
Koordinat Lokal: <input type=”text” readonly id=”destination”><br/><br/>
Heading: <input type=”text” readonly id=”heading”>&deg;
</font>
</div>
</font>
<br/>
<font color=”blue”>
<div id=”map” style=”width: 100%; height: 400px;”></div>
</font>

<font color=”black” size=”2″>GARIS PUTIH: Arah kiblat garis lurus (flat earth, bumi datar). GARIS KUNING: Arah kiblat garis geometri bola (globe earth, bumi bulat).</font>
</td>
</tr>
</table>
<small><font color=”grey”>Copyleft © 2015 Kasmui.</font></small>
</center>
</body>
</html>

 

Cek hasilnya melalui link http://kasmui.com/kiblat/brebes.htm

Leave a Comment

Filed under Agama