Tuesday, October 23, 2012

Find Elevation Path

Find elevation Path using jQuery maps3 API and display as a Chart using Google Column Charts : 

 In My previous post i have explained how to find the elevation at a place ,
Now in this post i am gonna aid you in comparing  the elevation between 2 points, which is marked in maps , you can now compare between the points and display it using the Google visualization charts component as column charts .

 Component used :
1.gmaps3 jQuery plugin
2.Google Column Charts visualization Component.

Map is Invoked in Satellite view using the mapId google.maps.MapTypeId.SATELLITE

 The data to the chart is build as mentioned :

var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
  data.addRow(['', results[i].elevation]);
}
chart.draw(data, {
  width: 500,
  height: 300,
  legend: 'none',
  titleY: 'Elevation (m)',
  focusBorderColor: '#00ff00'
});




<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="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
#container{overflow: auto;margin: 0 auto;width: 1200px;}
#test1{border: 1px dashed #C0C0C0;width: 500px;height: 400px;float: left;}
#chart{float: left;}
</style>
<script type="text/javascript">
  var chart;
  var path = [
    [36.012196, -112.100348],
    [36.221866, -112.098975]
  ];
  google.load("visualization", "1", {packages: ["columnchart"]});
  $(function(){
    chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    $('#test1').gmap3(
      {action: 'init',center: [36.112196, -112.100348],zoom:10,mapTypeId: google.maps.MapTypeId.SATELLITE},
      {action: 'addMarker',latLng: path[0]},{ action: 'addMarker',latLng: path[1]},
      {action: 'getElevation',path: path,samples: 500,
        callback: function (results) {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Sample');
          data.addColumn('number', 'Elevation');
          for (var i = 0; i < results.length; i++) {
            data.addRow(['', results[i].elevation]);
          }
          chart.draw(data, {
            width: 500,
            height: 300,
            legend: 'none',
            titleY: 'Elevation (m)',
            focusBorderColor: '#00ff00'
          });
        }
      });
    });
</script>
</head>
<body>
<div id="container">
<div id="test1" class="gmap3"></div>
<div id="chart"></div>
</div>
</body>
</html>



Posted by at No comments:
Labels: , , , , , , , , , , , , , , ,
Location: Coimbatore, Tamil Nadu, India

Find Elevation at a point

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>
Posted by at No comments:
Labels: , , , , , ,
Location: Coimbatore, Tamil Nadu, India

Find distance b/w places

Now we have come to an interesting part , Do you need to find the distance between any two places aroud the world , it's achieved using jQuery maps3 plugin . This is achieved by using the action 'getDistance' and the travel model used here 'google.maps.TravelMode.DRIVING'. Now enjoy calculating the distance between your fav places around the world .

 If no Results are found we display a message 'No route could be found between the origin and destination'

 If the Source and the destion could not be identified then we display a message 'The origin and/or destination of this pairing could not be geocoded'


<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;
}
</style>
<script type="text/javascript">
function distance(){
  $('body').gmap3({
    action:'getDistance',
    options:{
      origins:[$('#origins').val()],
      destinations:[$('#destinations').val()],
      travelMode: google.maps.TravelMode.DRIVING
    },
    callback: function(results){
      var html = '';
      if (results){
        for (var i = 0; i < results.rows.length; i++){
          var elements = results.rows[i].elements;
          for(var j=0; j<elements.length; j++){
            switch(elements[j].status){
              case google.maps.DistanceMatrixStatus.OK:
                html += elements[j].distance.text + ' (' + elements[j].duration.text + ')<br />';
                break;
              case google.maps.DistanceMatrixStatus.NOT_FOUND:
                html += 'The origin and/or destination of this pairing could not be geocoded<br />';
                break;
              case google.maps.DistanceMatrixStatus.ZERO_RESULTS:
                html += 'No route could be found between the origin and destination.<br />';
                break;
            }
          }
        }
      } else {
        html = 'error';
      }
      $('#results').html( html );
    }
  });
}
</script>
</head>

<body>
Origin :
<input type="text" id="origins" />
Destination :
<input type="text" id="destinations" />
<input type="button" id="distance" value="distance" onclick="distance();">
<br />
<br />
Results :
<div id="results"></div>
</body>
</html>


Google maps get Distance using map3 Plugin

Posted by at No comments:
Labels: , , , , , , , , ,
Location: Coimbatore, Tamil Nadu, India
Subscribe to: Posts (Atom)