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>
<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";
</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>
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>
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>
<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); }
{
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
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>titre = "Ma position";
initialise();
}
google.maps.event.addDomListener(window, 'load', initialise);
</script>
</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.