Copy the following code into the body of your web page:
<iframe src="http://qib.la/embed/" width="300" height="200"
scrolling="no" frameborder="0" style="border:5px solid #BBB">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://qib.la/">Qibla Direction</a>.
</iframe>
This is how it looks:
Display your own location. To obtain your latitude and longitude, right-click on your location within Google Maps, then select "What’s here?":
<!-- zoom and type are optional. Type can be satellite, terrain, etc. -->
<iframe src="http://qib.la/embed/?lat=51.50093&lng=-0.14279&zoom=15&type=satellite"
width="300" height="200" scrolling="no" frameborder="0" style="border:5px solid #BBB">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://qib.la/">Qibla Direction</a>.
</iframe>
Have the web browser determine the person's location automatically if their browser supports geolocation:
<head>
<script>
var zoom = 12; // 18 for mobile phones because the geolocation is more accurate
function init() {
// Don't bother if the web browser doesn't support cross-document messaging
if (window.postMessage) {
if (navigator && navigator.geolocation) {
try {
navigator.geolocation.getCurrentPosition(function(pPos) {
send(pPos.coords.latitude, pPos.coords.longitude);
}, function() {});
} catch (e) {}
} else if (google && google.gears) {
// Relevant if targeting mobile phones (some of which may have Google Gears)
try {
var geoloc = google.gears.factory.create("beta.geolocation");
geoloc.getCurrentPosition(function(pPos) {
send(pPos.latitude, pPos.longitude);
}, function() {});
} catch (e) {}
}
}
}
function send(pLat, pLng) {
var myiframe = document.getElementById("myiframe").contentWindow;
// The third parameter, zoom, is optional
myiframe.postMessage(pLat + "," + pLng + "," + zoom, "http://qib.la");
}
window.onload=init;
</script>
</head>
<body>
<iframe id="myiframe" src="http://qib.la/embed/" width="400" height="400">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://qib.la/">Qibla Direction</a>.
</iframe>
</body>