Now you can easily find the elevation at a place using maps3 API , The elevation at that point is retrieved from the google maps using the action 'getElevation' and that is shown in a separate frame window when the marker is moved to that point , inaddition to that when the mouse is moved around the map the action is captured using the 'mousemove' event and the meter is refresed to show the elevation as you see in the below picture !!!!
<html>
<head>
<script type="text/javascript"
src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript"
src="../gmap3.js"></script>
<style>
.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">
function
refreshinfowindow( latLng ){
$('#test1').gmap3({
action: 'getElevation',
latLng:latLng,
callback: function(results){
if (results) $('#elevation').html("The
elevation at this point <br/>is " + results[0].elevation + "
meters.");
}
});
}
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();
$('#test1').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)
+ '
meters');
$('#pct').css('width', v + '%');
}
});
}
$(function(){
var center =
[63.3333333, -150.5];
$('#test1').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: '<div
id="elevation"></div>'
},
onces: {
domready: function(){
refreshinfowindow( center );
}
}
}
}
);
});
</script>
</head>
<body>
<div id="meters"><div id="pct"></div><div id="value"></div></div>
<div id="test1"
class="gmap3"></div>
</body>
</html>
No comments:
Post a Comment