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.

 


Logo Lycée Paul Sérusier

J'enseigne au
Lycée Paul SERUSIER
Avenue de Waldkappel
29270 CARHAIX PLOUGUER
Tél : 02 98 99 29 29
Site : www.lycee-serusier.fr

footer2

Richard GAUTHIER
Professeur de Physique Appliquée
Certification ISN
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

 

 


Mentions légales


Plan du site

  Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.