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

Leave a Reply