Direction de la mecque avec google map

Télécharger le projet
Commenter

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>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (amrounix)