Showing posts with label maps3. Show all posts
Showing posts with label maps3. Show all posts

Tuesday, October 23, 2012

Fix Panel to take boundaries

Use Fix Panel to Take Boundaries in Google Maps :


This post is intended in using fix panel to determine the boundaries from Google maps !!!


<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: 500px;height: 250px;}
#box{border: 1px solid #FF0000;background-color: #AFAFAF;width: 160px;height: 64;font-size: 11px;}
#box .line{border-bottom: 1px solid #FF0000;overflow: auto;clear: both;height: 16px;}
#box #lng-west{border-bottom: 0px;}
#box .name{width: 30px;border-right: 1px solid #FF0000;float: left;}
#box .value{float: left;}
</style>
<script type="text/javascript">
$(function(){
  var box = '<div id="box">' +
  '<div id="lat-north" class="line"><div class="name">North</div><div class="value"></div></div>' +
  '<div id="lng-east" class="line"><div class="name">East</div><div class="value"></div></div>' +
  '<div id="lat-south" class="line"><div class="name">South</div><div class="value"></div></div>' +
  '<div id="lng-west" class="line"><div class="name">West</div><div class="value"></div></div>' +
  '</div>';
  $('#test1').gmap3(
    {action: 'addFixPanel',options:{content: box,middle: true},
      events:{
        bounds_changed: function(map){
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();
        $("#lat-north .value").html(ne.lat());
        $("#lng-east .value").html(ne.lng());
        $("#lat-south .value").html(sw.lat());
        $("#lng-west .value").html(sw.lng());
      }
    }
  });
 });
</script>
</head>
<body>
<div id="test1" class="gmap3"></div>
</body>
</html>

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>