GeoLocalisation

— Laisser un commentaire

La fonction Geolocation.watchPosition() localise le navigateur en retournant sa latitude et longitude :

<html>
<head>
 <title>Exemple de GeoLocalisation</title>	
</head>	
<body>  
</body>

var id, target, options;
//-- Fonction de callback lancée à l'appel de la geolocalisation
function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log('Congratulation, you reach the target '+crd.latitude+' '+crd.longitude);
  }
  else
  {
	 console.log('Your localization is '+crd.latitude+' '+crd.longitude);
  }
  navigator.geolocation.clearWatch(id);
};
//-- Si erreur appel de cette fonction de callback avec affichage dans la console
function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};
//-- Définition d'un objet cible exemple
target = {
  latitude : 48.851524399999995,
  longitude: 2.3156428
}
//-- Options de l'appel de la fonction
options = {
  enableHighAccuracy: false, //-- true = utilisation du GPS
  timeout: 5000,             //-- temps maximum alloué pour la réponse (nombre ou Infinity)
  maximumAge: 0              //-- 0 : pas utilisation de cache, sinon Infinity ou millisec
};
//-- Appel de la fonction
id = navigator.geolocation.watchPosition(success, error, options);
/script>
/html>

Infos sur la latitude et la longitude dans Google Maps

Utilisation de Google Maps API :

1°) activez dans la console le service Google Maps Embed API

2°) Sélectionnez le lien API Access . La cfel d’API est dans la section Simple API Access .

L’intégration dans une page HTML donne :

 Exemple de GeoLocalisation	
	
  

  width="600"
  height="450"
  id="gmap"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=xxxx
       &q=Touques, France">



var id, target, options;
//-- Fonction de callback lancée à l'appel de la geolocalisation
function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log('Congratulation, you reach the target '+crd.latitude+' '+crd.longitude);
    document.getElementById('gmap').src="https://www.google.com/maps/embed/v1/place?key=xxxx&q="+crd.latitude+', '+crd.longitude;
  }
  else
  {
	 console.log('Your localization is '+crd.latitude+' '+crd.longitude);
  }
  navigator.geolocation.clearWatch(id);
};
//-- Si erreur appel de cette fonction de callback avec affichage dans la console
function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};
//-- Définition d'un objet cible exemple
target = {
  latitude : 48.851524399999995,
  longitude: 2.3156428
}
//-- Options de l'appel de la fonction
options = {
  enableHighAccuracy: false, //-- true = utilisation du GPS
  timeout: 5000,             //-- temps maximum alloué pour la réponse (nombre ou Infinity)
  maximumAge: 0              //-- 0 : pas utilisation de cache, sinon Infinity ou millisec
};
//-- Appel de la fonction
id = navigator.geolocation.watchPosition(success, error, options);

</html>

Il convient de changer les xxxx par votre clef !

De nombreuses options sont possible, comme le mot clef « direction » permet de matérialiser le trajet, et satellite d’avoir une vue satellite…

https://www.google.com/maps/embed/v1/directions
  ?key=API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

https://www.google.com/maps/embed/v1/view
  ?key=API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

On the url, it requires the server key in the end and not the api key for the app.

So Basically, you just add the server key in the end of the URL like this:

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=yourlatitude,yourlongitude&radius=5000&sensor=true&key=SERVERKEY

Now, to obtain the server key, just follow these steps:

1) Go to Developer Console https://code.google.com/apis/console/

2) In the Credentials, under Public API Access , Create New key

3) Select the server key from the option.

4) Enter your IP Address on the field and if you have more ip addresses, you can just add on every single line.NOTE: Enter the IP Address only when you want to use it for your testing purpose. Else leave the IP Address section blank.

5) Once you are done, click create and your new Server Key will be generated and you can then add that server key to your URL.

6) ne pas oublier d’activer l’API « Google Places API Web Service »

URL : https://maps.googleapis.com/maps/api/geocode/json?latlng=48.848066,2.316197&sensor=true_or_false&key=YOU_SERV_KEY

Attention le quota gratuit limite à 1000 interrogations par jour

Notation :
Google maps : https://www.google.fr/maps/place/48°84'80.66"N+2°31'61.97
Pebble : lat= 48.848066 lon= 2.316197

http://maps.googleapis.com/maps/api/geocode/json?latlng=48.848066,2.316197&sensor=true_or_false

Sous PEBBLE :

Dans https://cloudpebble.net

A) Définir deux clefs (Menu Paramètres) :

keys