HTML5 et la géolocalisation

L'application ci-dessous permet de vous géolocaliser sur une carte google map.

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="author" content="Richard GAUTHIER">
       <title>La géolocalisation avec Html5</title>
       <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
           .bloc {
                margin: 20px auto 20px auto;
                padding : 5px 5px 5px 5px;
                max-width: 310px;
                background: #FFF;
                box-shadow: 0 0 8px #000;
              }

            #idPara {
                  margin: 0px 0px 0px 0px;
            }


           #map-canvas {
                width: 300px;
                height: 300px;
                margin: auto 2px auto 2px;
               }
        </style>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGV3L7-a4qcJyDd-E8fb-yYMr5rFein0g&sensor=false">
</script>
</head>
<body>
<section class="bloc" >
<div id = "idPosition">
<button onclick="getLocalisation()">Me géolocaliser</button>
<p id="idPara"></p>
</div>
</section>
<section class="bloc" >
<article>
<div id="map-canvas"></div>
</article>
</section>

<script type="text/javascript">
//variables globales
var latitude = 48.2785062; //Géolocalisation de Carhaix
var longitude = -3.5510303;
var monId=document.getElementById("idPara");
var map;
var titre = "Lycée Paul Sérusier";
function getLocalisation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(maPosition);
}
else{monId.innerHTML="La géolocalisation n'est pas prise en charge par votre navigateur.";}
}

function maPosition(position)
{
monId.innerHTML ="Latitude: ";
latitude = position.coords.latitude;
monId.innerHTML += latitude + "°";
monId.innerHTML += "<br/>Longitude: ";
longitude = position.coords.longitude;
monId.innerHTML += longitude + "°";
monId.innerHTML += "<br/>Précision: ";
monId.innerHTML += position.coords.accuracy + "m";
monId.innerHTML += "<br/>Altitude: ";
monId.innerHTML += position.coords.altitude + "m";
monId.innerHTML += "<br/>Vitesse: ";
monId.innerHTML += position.coords.speed + "m/s<br/>";

var monBouton = document.createElement("button");
monBouton.onclick=afficherMaPosition;
var leTexte = document.createTextNode("Afficher ma position sur la carte");
monBouton.appendChild(leTexte);
document.getElementById("idPara").appendChild(monBouton); }
function initialise() {
     var mapOptions = {
               center: new google.maps.LatLng( latitude , longitude ),
               zoom: 12,
               //mapTypeId: google.maps.MapTypeId.ROADMAP
               //mapTypeId: google.maps.MapTypeId.SATELLITE
               //mapTypeId: google.maps.MapTypeId.TERRAIN
               mapTypeId: google.maps.MapTypeId.HYBRID
               };

map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);

          function setMarkers() {

var latlngset = new google.maps.LatLng(latitude, longitude);
var commentaire = "Code créé pour la spécialité ISN en S et la STI2D<br/>Auteur : Richard GAUTHIER";

// Options de la fenêtre
var myWindowOptions = {
content:
'<h4>'+ titre + '</h4>'+
'<p>'+ commentaire+ '</p>'
};

// Création de la fenêtre
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);

var marker = new google.maps.Marker({
map: map,
//icon: 'pin.png',
position: latlngset,
title: titre
});


// Affichage de la fenêtre au click sur le marker
google.maps.event.addListener(marker, 'click', function() {
myInfoWindow.open( map , marker);
});
}
//Mettre une marque sur la carte
setMarkers();

}//fin de la fonction initialise

function afficherMaPosition(){
titre = "Ma position";
initialise();

}

google.maps.event.addDomListener(window, 'load', initialise);


</script>
</body>
</html>

 

Pour utiliser google map, il vous faudra une clé API Access. Pour l'obtenir, vous devez avoir un compte Gmail et vous rendre ici.

 

Affichages : 7271