Accueil > > > DIRECTION DE LA MECQUE AVEC GOOGLE MAP
DIRECTION DE LA MECQUE AVEC GOOGLE MAP
Information sur la source
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
- <!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>
<!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>
Historique
- 11 mars 2009 17:14:34 :
- ajout image
- 15 mars 2009 11:44:46 :
- -désacivation de la géolocalisation
- 15 mars 2009 11:45:25 :
- désactivation de la geolocalisation
- 20 mars 2009 10:22:29 :
- ajout des contrôle de mouvement + clic de la carte, pour repositionner le point de localisation
- 10 juin 2010 09:46:25 :
- -link
- 10 juin 2010 09:47:38 :
- -link
- 10 juin 2010 09:50:05 :
- -link
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Aide javascript scrolling vertical [ par hltyson13 ]
bonjour,J'utilise un javascript pour le défilement de news au format texte.le voici:"<head><meta http-equiv="refresh" content="1000; url
prob de vitesse de scroll, truc de dingue [ par anton_nice ]
Salut a tous, tout d abord, et merci pour toutes ces excellentes sources. Voila mon souci: J ai un iframe, dedans j ai fait un scroll avec des fleches
Déplacement horizontale [ par chamhallot ]
Bonjour, je susi débutant en js et j'aimerais faire défiler horyzontalement un certain nombre d'image lorsque l'utilisateur s
positionner par defaut sur le dernier element de la liste [ par babylonne ]
Bonjour tt le monde, je voudrai savoir comment on fait pour se positionner sur le dernier element par defaut lors du chargement de la page sans tenir
Remplissage d'une liste deroulante [ par babylonne ]
bonjour tt le monde,j'ai un souci par rapport au remplissage de ma 2 liste c-a- dire au momment ou je clique sur direction qaulité , je dois avoir la
|
Derniers Blogs
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|