Change : Satellite and Street View

Drop Down to Change Between satellite and Street view using gmap3 jQuery Plugin:

Gmaps3 Plugin Provides us mapTypeControlOptions to change between the satellite view and street view in google maps which is demonstrated in this post , initially when the map is loaded the maps loads in satellite which is done is using static mapTypeId : 'google.maps.MapTypeId.SATELLITE' and then using map type control options drop down the view can be changed :


mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},

<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: 1000px;

  height: 500px;

}

</style>

<script type="text/javascript">

$(function(){

  $('#test1').gmap3({

    action: 'init',

    options:{

      center:[22.49156846196823, 89.75802349999992],

      zoom:2,

      mapTypeId: google.maps.MapTypeId.SATELLITE,

      mapTypeControl: true,

      mapTypeControlOptions: {

        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

      },

      navigationControl: true,

      scrollwheel: true,

      streetViewControl: true

    }

  });

});

</script>

</head>

<body>

  <div id="test1" class="gmap3"></div>

</body>

</html>

Use Forms in Maps

Fill in an address, a marker will be added and the map will be centered on it :

Show places on the button click event, that is achieved using jQuery $('#test-ok').click(function(){}  once its done the value in the text box is passed to the gmaps3 plugin and action 'getlatlng' is done , In the call back method of that action marker is added to the respective address typed its actually center it which makes the map look Cool :) :) 

<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>

body {text-align: center;}

#ctrl {width: 500px;margin: 0 auto;}

.gmap3 {margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;

        height: 250px;}

</style>

<script type="text/javascript">

$(function(){

  $("#test").gmap3();

  $('#test-ok').click(function(){

  var addr = $('#test-address').val();

  if ( !addr || !addr.length ) return;

  $("#test").gmap3({

    action:   'getlatlng',

    address:  addr,

    callback: function(results){

      if ( !results ) return;

      $(this).gmap3({

      action:'addMarker',

      latLng:results[0].geometry.location,

      map:{

        center: true

      }

      });

    }

   });

  });

  $('#test-address').keypress(function(e){

  if (e.keyCode == 13){

    $('#test-ok').click();

  }

  });

});

</script>

</head>

<body>

<div id="ctrl">Address : <input type="text" id="test-address" size="60">

<button type="button" id="test-ok">Ok</button>

</div>

<div id="test" class="gmap3"></div>

Fill in an address, a marker will be added and the map will be centered on it

</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>

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>