en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut
<!DOCTYPE html>
<html>
<head>
<title>Géolocalisation : altitudes - profondeurs - coordonnées Pleine fenêtre</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* style pour carte plein écran, pour limiter voir la div "carte" */
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- ajouter dans la div après id="carte" ex: style="width:800px; height:600px ; left: 10px" -->
<div id="carte" ></div>
<script>
var altitude;
var macarte;
var infobulle;
var Toulon ={lat: 43.14519475222331, lng: 5.959945708911391};
function InitCarte(){
macarte = new google.maps.Map(document.getElementById('carte'),
{
center: Toulon,
draggableCursor:'help',
zoom: 14,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
altitude = new google.maps.ElevationService();
infobulle = new google.maps.InfoWindow();
google.maps.event.addListener(macarte, 'click', getElevation);
}
function getElevation(event) {
var lieu = [];
// enregistre l'altitude du lieu et le met dans un tableau
var lieuduclic = event.latLng;
lieu.push(lieuduclic);
// crée la la requete de l'altitude en fonction du lieu dans le tableau
var rechlieu = {
'locations': lieu
}
// initialise la réponse
altitude.getElevationForLocations(rechlieu, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// au premier résultat
if (results[0]) {
// ouvre et affiche l'infobulle à l'endroit du clic
infobulle.setContent('<p><h3>Géolocalisation (altitude et coordonnées) de cet endroit.</h3></p>L\'altitude ici est de :' +
results[0].elevation + ' mètres.<br>' +
'Les coordonnées sont : ' +
lieuduclic + '.');
infobulle.setPosition(lieuduclic);
infobulle.open(macarte);
} else {
alert('pas de résultat trouvé');
}
} else {
alert('cause de l\'échec : ' + status);
}
});
}
</script>
<!-- autorisation Google -->
<script src="https://maps.googleapis.com/maps/api/js?key=MaKey=InitCarte"
async defer></script>
<noscript>
<p>Il semble que JavaScript soit désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>