Cette fonction vous permet d'obtenir l'altitude d'un point géographique
getElevation
- Résultat du callback : google.maps.ElevationResult , google.maps.ElevationStatus
Carte avec addStyledMap
Passez le curseur de votre souris sur la carte pour visualiser l'altitude du point survolé. Vous pouvez également déplacer le marqueur.
Code complet avec addStyledMap
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8"/>
<title>Votre titre de page</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#maCarte{height: 100%;}
.gmap3{
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 1024px;
height: 768px;
}
#meters{
height: 30px;
width: 800px;
margin: 10px auto;
border: 1px solid #000000;
position: relative;
}
#value{
position: absolute;
padding-top: 5px;
text-align: center;
width: 800px;
}
#pct{
position: absolute;
top: 0px;
height: 30px;
width: 0px;
background-color: #FF0000;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
function refreshinfowindow( latLng ){
$('#maCarte').gmap3(
{
action: 'getElevation',
latLng:latLng,
callback: function(results){
if (results) $('#elevation').html("Ce point se situe à une altitude
de : " + results[0].elevation + " mètres.");
}
}
);
}
var max = 4000;
var last, ts;
function updateLast(){
var r = (new Date).getTime();
last = r;
return r;
}
function refreshMeterValue( latLng ){
if ( ts ) clearTimeout(ts);
ts = setTimeout(
function(){doRefreshMeterValue( latLng )}, 200);
}
function doRefreshMeterValue( latLng ){
var myLast = updateLast();
$('#maCarte').gmap3(
{
action: 'getElevation',
latLng:latLng,
callback: function(results){
if (!results || (myLast != last)) return;
var v = Math.min(100, Math.round((results[0].elevation * 100 / max)));
$('#value').html(Math.round(results[0].elevation) + ' mètres');
$('#pct').css('width', v + '%');
}
}
);
}
$(function(){
var center = [63.3333333, -150.5];
$('#maCarte').gmap3(
{
action: 'init',
options:{
zoom:8,
center: center,
mapTypeId: 'terrain'
},
events:{
mousemove: function(map, event){
refreshMeterValue( event.latLng );
}
}
},
{
action:'addMarker',
latLng: center,
marker:{
options:{
draggable: true
},
events:{
dragend: function(marker, event){
refreshinfowindow( event.latLng );
}
}
},
infowindow:{
options:{
size: new google.maps.Size(50,20),
content: ''
},
onces: {
domready: function(){
refreshinfowindow( center );
}
}
}
}
);
});
</script>
</head>
<body>
<div id="meters"><div id="pct"></div><div id="value"></div></div>
<div id="maCarte" class="gmap3"></div>
</body>
</html>