Copy the following code into the body of your web page:
<iframe src="http://www.qib.la/embed/" width="300" height="200"
scrolling="no" frameborder="0" style="border:10px solid #BBB">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://www.qib.la/">Qibla Direction</a>.
</iframe>
This is how it looks:
You can override any style or image. To make all borders red and the address text green:
<!-- #map{border-top:1px solid red} #addr{color:green} must be URL encoded -->
<iframe src="http://www.qib.la/embed/?style=%23map%7Bborder-top%3A1px+solid+red%7D+
%23addr%7Bcolor%3Agreen%7D" width="300" height="200"
scrolling="no" frameborder="0" style="border:10px solid red">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://www.qib.la/">Qibla Direction</a>.
</iframe>
This is how it looks now:
Google Analytics is enabled to gauge how much effort should be invested in further enhancements. To disable it:
<iframe src="http://www.qib.la/embed/?track=no" width="300" height="200"
scrolling="no" frameborder="0" style="border:10px solid red">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://www.qib.la/">Qibla Direction</a>.
</iframe>
You can optionally have the web browser ask for, and therefore determine a 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://www.qib.la");
}
</script>
</head>
<body onload="init()">
<iframe id="myiframe" src="http://www.qib.la/embed/" width="400" height="400">
Check the prayer direction towards the Ka'ba in Makkah at
<a href="http://www.qib.la/">Qibla Direction</a>.
</iframe>
</body>