Direction de la mecque avec google map

Soyez le premier à donner votre avis sur cette source.

Vue 132 089 fois - Téléchargée 2 480 fois

Description

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&amp;v=2&amp;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/>
&nbsp;&nbsp;Entrez une adresse ou un lieu :&nbsp;<input type="text" id="adresse" value="" style="width:300px;">&nbsp;&nbsp;<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>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 21 mai 2007
Statut
Membre
Dernière intervention
9 août 2010

Ca c'est de la sadaka jaria!
Merci beaucoup, tu m'as enlevé un énorme souci!
Bonne continuation.
Messages postés
4
Date d'inscription
vendredi 14 février 2003
Statut
Membre
Dernière intervention
10 juin 2010

Oui la carte est par défaut orienté au nord, encore faut il que l'utilisateur le sache, en fait dans ton programme, c'est le trait vert qui donne la direction de la quibla et non pas seulement la valeur de l'angle donnée en marge à droite. Il reste quand intéressant d'avoir l'angle précis que fait le trait vert avec une direction donnée (une route, le mur de sa maison, les carrelages, ...)
Messages postés
79
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

Salut Chel,
L'avantage avec la carte, c'est que tu peut te baser sur ta maison ou l'orientation des rues à proximité pour avoir une direction vers la Mecque.
Messages postés
4
Date d'inscription
vendredi 14 février 2003
Statut
Membre
Dernière intervention
10 juin 2010

Cela suppose qu'on a une boussole avec, ce qui est rarement le cas, un rapporteur si, pourquoi ne pas permettre à l'utilisateur de trouver la direction de la quibla à partir d'une direction choisie par l'utilisateur (ie a partir de deux points sur la carte)
Messages postés
79
Date d'inscription
lundi 10 mars 2003
Statut
Membre
Dernière intervention
12 juillet 2010

Salam POPO67800, si tu vois une courbe, c'est parce que la terre est ronde ! si tu te place au États-unis par exemple, la distance vers la Mecque est plus courte en passant près du pôle Nord, d'où la courbe...
Afficher les 20 commentaires

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.