ce programme permet d'avoir la direction de la Qibla (la Mecque) n'importe où dans la monde sans utiliser de boussole grâce à l'API Google MAP
dernière version sur mon site :
http://www.crew.free.fr/?dayMD5=islam
Source / Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Direction de la Qibla</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAVkfCvwgjflEc0QKyOi8SiBQvNNpTpilDwpBuhZ-TgjbdrxD1BRTAS5X33atUuxfvf9nT5HsYq5eLMw"
type="text/javascript"></script>
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
var gpoint;
var qibla;
var myEvent;
var myEvent2;
var pi_=3.1415926535897932384626433832795;
//initialisation de Google MAP
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
//enlever le comm pour modifier le type visualisation
//map.setMapType(G_HYBRID_MAP);
try
{
//détection de votre position grace à la geolocalisation de votre IP (utilisation d'une API exterieur)
var point = new GLatLng(parseFloat(geoip_latitude()) , parseFloat(geoip_longitude()));
}
catch(e)
{
//alert('geoip HS');
//j'ai initialiser avec des valeur par défaut car la geolocalisation ne fonctionne pas tout le temps
var point = new GLatLng(48.873818, 2.29498386);
}
//coordonnée en dur de la position de la mecque
qibla = new GLatLng(21.4225, 39.826111);
//param zoom + position
map.setCenter(point, 13);
//param des boutons de controle
//http://code.google.com/intl/fr-BE/apis/maps/documentation/controls.html
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
//fonction qui trace une ligne
traceLigneQibla('',point);
//active les interactions avec les evenements
//http://code.google.com/intl/fr-BE/apis/maps/documentation/events.html
//si on bouge la carte, execute la fonction bouger
myEvent=GEvent.addListener(map, 'moveend', bouger);
//si on clic la carte, execute la fonction clicMoi
myEvent2=GEvent.addListener(map, 'click', clicMoi);
//different test
//map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(-60,0)));
//map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(60,-10)));
//map.enableContinuousZoom();
//map.addControl(new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(20,0)));
}
}
function unload(){
GUnload();
}
function clicMoi(pmarker, point){
try{
gpoint=point;
map.clearOverlays();
//centre la carte , sur le point cliqué
map.setCenter(gpoint);
marker = new GMarker(gpoint);
map.addOverlay(marker);
setTimeout("traceLigneQibla('',gpoint)",100);
} catch (e){
//alert('vous avez cliqué sur un marqueur :');
//getProp(pmarker);
}
}
function bouger(){
map.clearOverlays();
//récupère les coordonnées du centre de la carte
gpoint = map.getCenter();
marker = new GMarker(gpoint);
map.addOverlay(marker);
setTimeout("traceLigneQibla('',gpoint)",100);
// viewInfo(gpoint);
}
//trace une droite entre le point de localisation et la mecque
function traceLigneQibla(adresse,point){
map.clearOverlays();
//map.setCenter(point);
//place un marqueur à l'emplacement
marker = new GMarker(point);
map.addOverlay(marker);
//affiche les infos sur la distances
if (adresse!='')
{
//debug de la propriete point pr avoir toutes ses fonctions
//getProp(point);
marker.openInfoWindowHtml("<font style='font-family:Tahoma;font-size:12px'>"+adresse+"</font>");
}
//trace la ligne geodesique entre les 2 points du globe
var polyOptions = {geodesic:true};
var polyline = new GPolyline([ point, qibla ], "#00ff00", 3, 1, polyOptions);
map.addOverlay(polyline);
viewInfo(point);
}
//retourne les proprietes d'un objet
function getProp(x)
{
for (e in x)
htm+=e+":"+x[e]+"\n";
alert(htm);
}
function viewInfo(point)
{
htm="<b>Latitude:</b>"+point.lat()+"<br/>";
htm+="<b>Longitude:</b>"+point.lng()+"<br/>";
htm+="<b>distance:</b>"+parseInt(point.distanceFrom(qibla),10)/1000+" km<br/>";
htm+="<b>angle:</b>"+deltaAngle(point,qibla) +"°N<br/>";
//affiche les coordonnées en temps réel
document.getElementById("infoMap").innerHTML=htm;
}
function deg2rad(angle)
{return (angle*Math.PI/180);}
function rad2deg(angle)
{return (angle*180/Math.PI);}
//retourne l'angle entre 2 points du globe selon la formule :
//Angle = arctan( sin(lon_B-lon_A) / (cos(lat_A) * tan(lat_B) - sin(lat_A) * cos(lon_B - lon_A)))
function deltaAngle(pta,ptb)
{
rlng= deg2rad(ptb.lng()- pta.lng());
//angle = rad2deg(Math.atan(Math.sin(rlng)/(Math.cos(deg2rad(pta.lat()))* Math.tan( deg2rad(ptb.lat()))- Math.sin(deg2rad(pta.lat()))* Math.cos(rlng))));
//bcp mieux !
angle = rad2deg(Math.atan2(Math.sin(rlng), Math.cos(deg2rad(pta.lat()))* Math.tan( deg2rad(ptb.lat()))- Math.sin(deg2rad(pta.lat()))* Math.cos(rlng)));
if (angle<0)
angle += 360;
//arrondi à 2 chiffres :
angle=parseInt(angle*100,10)/100;
return angle;
}
//lance la recherche
function rechercher(){
//supprime le controle sur l'evenement pour eviter le lancement de la fonction bouger
GEvent.removeListener(myEvent);
geocoder.getLocations(document.getElementById("adresse").value, recupadresse);
}
//convertie une adresse en coordonnée
function recupadresse(response){
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("impossible de localiser cette adresse !");
} else {
emplacement = response.Placemark[0];
//alert(emplacement.Point.coordinates[1]+' - '+emplacement.Point.coordinates[0]);
point = new GLatLng(emplacement.Point.coordinates[1],emplacement.Point.coordinates[0]);
htm="";
traceLigneQibla(emplacement.address,point);
}
//reaffecte le controle sur l'evenement car il est supprimer pendant la recherche
myEvent=GEvent.addListener(map, 'moveend', bouger);
}
//]]>
</script>
<body onload="try{load();}catch(e){}" onunload="try{unload();}catch(e){}">
<br/>Direction de la Qibla avec Google MAP<br/>
Entrez une adresse ou un lieu : <input type="text" id="adresse" value="" style="width:300px;"> <input type="button" value="recherche" onclick="rechercher()"><br><br>
<table>
<tr><td>
<div id="map" style="width:600px;height:350px"></div>
</td><td><div id="infoMap"></div></td></tr></table>
<br/><br/><br/><br/>
<center>
<div style="font-family:Tahoma;font-size:9px">dernière mise à jour sur mon site : <a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br>powered by <b>AmRouNiX</b> / <b>MaSTeR-KiLLeR</b> (<i>A. Selim</i>) <br> Toutes copies autorisées !</div>
</center>
</body>
</html>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.