Embed Qibla Direction Into Your Website

Benefits of Embedding

It appears to be part of your own website. Our own home page uses the embedded version.
Styling can be overridden.
No advertisements.
No branding except your own.
Free of charge.
Automatically updates when a new version is available.
Hosted on cloud infrastructure, giving near 100% availability/uptime and high bandwidth.

Basic Usage

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:5px 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:

Advanced Usage

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://www.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://www.qib.la/">Qibla Direction</a>.
     </iframe>

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:5px 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:5px solid #BBB">
         Check the prayer direction towards the Ka'ba in Makkah at
         <a href="http://www.qib.la/">Qibla Direction</a>.
     </iframe>

Geolocation

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://www.qib.la");
       }
       
       window.onload=init;
      </script>
     </head>

     <body>
      <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>