Easy Code Stuff: October 2015

Oct 17, 2015

Getting The Direction Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
<head>
    <title>Getting The Direction Between Two Markers In Google Map Using Google MAP API</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div id="map-canvas" style="height: 75%;"></div>
    <div>
        <strong>From Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="fromLat" />
        <span>Longitude : </span>
        <input type="text" id="fromLng" />
        <br /><br />
        
        <strong>To Location</strong><br />
        <span>Latitude : </span>
        <input type="text" id="toLat" />
        <span>Longitude : </span>
        <input type="text" id="toLng" />
        <br /><br />

        <div id="direction"></div>
    </div>
    <script type="text/javascript">
        var map;
        var fromLat = 6.928940573589038;
        var fromLng = 79.87219331750487;
        var toLat = 6.929110981212029;
        var toLng = 79.87013338098143;

        var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
        var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

        loadMap();
        setFromMarker();
        setToMarker();

        function loadMap() {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(fromLat, fromLng),
                zoom: 15
            });
        }

        function setFromMarker() {
            var fromMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(fromLat, fromLng),
                icon: fromIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(fromMarker, 'dragend', function (event) {
                fromLat = event.latLng.lat();
                fromLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setToMarker() {
            var toMarker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(toLat, toLng),
                icon: toIcon,
                animation: google.maps.Animation.DROP,
                draggable: true
            });

            google.maps.event.addListener(toMarker, 'dragend', function (event) {
                toLat = event.latLng.lat();
                toLng = event.latLng.lng();
                setLatLngDetails();
            });
        }

        function setLatLngDetails() {
            $("#fromLat").val(fromLat);
            $("#fromLng").val(fromLng);
            $("#toLat").val(toLat);
            $("#toLng").val(toLng);
            getDirection();
        }

        function getDirection() {
            var fromLocation = new google.maps.LatLng(fromLat, fromLng);
            var toLocation = new google.maps.LatLng(toLat, toLng);
            var service = new google.maps.DistanceMatrixService();
            service.getDistanceMatrix({
                origins: [fromLocation],
                destinations: [toLocation],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, callback_direction);
        }

        function callback_direction(response, status) {
            if (status != google.maps.DistanceMatrixStatus.OK) {
                alert('Error was: ' + status);
            } else {
                var origins = response.originAddresses;
                var destinations = response.destinationAddresses;
                var str = '';

                for (var i = 0; i < origins.length; i++) {
                    var results = response.rows[i].elements;
                    if (results[0].status != 'ZERO_RESULTS') {
                        for (var j = 0; j < results.length; j++) {
                            str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                        }
                    } else {
                        str = 'No Direction Found.';
                    }
                }

                $("#direction").html(str);
            }
        }
   
    </script>
</body>
</html>

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.

google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
google.maps.TravelMode.TRANSIT requests directions via public transit routes.
google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Getting The Direction Between Two Locations Using Google MAP API

In this article I'm going to show guys to get the direction between two locations. In-order to do that I have created a simple html page consisting four text fields to enter the from locations and to locations latitude and longitude. You can enter the locations latitude and longitudes of from and to locations and click the "Get Direction" button. After clicking the button you will get the direction.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
 <head>
  <title>Getting The Direction Between Two Locations Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <input type="button" value="Get Direction" onclick="getDirection()"/>
   <br/><br/>
   <div id="direction"></div>
  </div>
  
  <script type="text/javascript">

      function getDirection() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var service = new google.maps.DistanceMatrixService();
          service.getDistanceMatrix({
              origins: [fromLocation],
              destinations: [toLocation],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
          }, callback_direction);
      }

      function callback_direction(response, status) {
          if (status != google.maps.DistanceMatrixStatus.OK) {
              alert('Error was: ' + status);
          } else {
              var origins = response.originAddresses;
              var destinations = response.destinationAddresses;
              var str = '';

              for (var i = 0; i < origins.length; i++) {
                  var results = response.rows[i].elements;
                  if (results[0].status != 'ZERO_RESULTS') {
                      for (var j = 0; j < results.length; j++) {
                          str += origins[i] + '<strong> to </strong>' + destinations[j] + '<strong> : </strong>' + results[j].distance.text + '<strong> in </strong>' + results[j].duration.text + '<br/>';
                      }
                  } else {
                      str = 'No Direction Found.';
                  }
              }

              $("#direction").html(str);
          }
      }
  </script>
 </body>
</html>

Just check the code in browser, you will get the following output.

When you are getting the direction between two locaions, you must specify the mode of the travel. Following are the travel modes supported by google.

google.maps.TravelMode.DRIVING (Default) indicates standard driving directions using the road network.
google.maps.TravelMode.BICYCLING requests bicycling directions via bicycle paths & preferred streets.
google.maps.TravelMode.TRANSIT requests directions via public transit routes.
google.maps.TravelMode.WALKING requests walking directions via pedestrian paths & sidewalks.

Getting The Distance Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the distance between two locations. Please note that, this is not the direction distance. That mean if you select two locations you will get distance, which is going to very less than the travel distance. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the distance.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
 <head>
  <title>Getting The Distance Between Two Markers In Google Map Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div id="map-canvas" style="height:75%;"></div>
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      var map;
      var fromLat = 6.928940573589038;
      var fromLng = 79.87219331750487;
      var toLat = 6.929110981212029;
      var toLng = 79.87013338098143;

      var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
      var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

      loadMap();
      setFromMarker();
      setToMarker();

      function loadMap() {
          map = new google.maps.Map(document.getElementById('map-canvas'), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(fromLat, fromLng),
              zoom: 15
          });
      }

      function setFromMarker() {
          var fromMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(fromLat, fromLng),
              icon: fromIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(fromMarker, 'dragend', function (event) {
              fromLat = event.latLng.lat();
              fromLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setToMarker() {
          var toMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(toLat, toLng),
              icon: toIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(toMarker, 'dragend', function (event) {
              toLat = event.latLng.lat();
              toLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setLatLngDetails() {
          $("#fromLat").val(fromLat);
          $("#fromLng").val(fromLng);
          $("#toLat").val(toLat);
          $("#toLng").val(toLng);
          getDistance();
      }

      function getDistance() {
          var fromLocation = new google.maps.LatLng(fromLat, fromLng);
          var toLocation = new google.maps.LatLng(toLat, toLng);

          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
   
  </script>
 </body>
</html>

Simply copy and paste the above codes in a text editor and it in a browser. You will get the below outputs.

If you carefully read the above code, you will know that I have initialized the from and to locations. If you want to make this code more efficient way, where you want to get the user location as default location. Click Here to check the article.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Restrict To Enter Only Decimal Using Java Script

In this article I'm going to show guys, how to restrict a text field only to enter decimal values. And most importantly you can tell the function how many decimal places you want to restrict.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
<body>
    <label>One Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,1)" />
    <br />

    <label>Two Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,2)" />
    <br />

    <label>Five Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,5)" />
</body>
<script type="text/javascript">
    function restrictToDecimal(el, evt, dec) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split('.');
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        //Restrict To Enter One Period
        if (number.length > 1 && charCode == 46) {
            return false;
        }

        //Getting The Character Position Entered
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
            return false;
        }

        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }
</script>
</html>

If you want use following single JavaScript to do it.

function restrictToDecimal(el, evt, dec) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    //Restrict To Enter One Period
    if (number.length > 1 && charCode == 46) {
        return false;
    }

    //Getting The Character Position Entered
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
        return false;
    }

    return true;

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

}

Bind Data Source To A DataGridView In Windows Form Application With Sql Server

In This Article Ill Demonstrate You Guys To Integrate A SQL Server Data Source With Data Grid View In C# Using Step By Step. In This Article I Will Create A Windows Form Application To Integrate With SQL Server. First Of All Make Sure You Have Installed SQL Server.

So Lets Start Our Application By Opening The Visual Studio.

Step 01 : Click New Project And Select Windows > Windows Forms Application And Give A Project Name To It. Just Have A Look On Below Image, It Shows How I Did.

Now Press OK And Create The Project. Then Open The Toolbox. If Toolbox Not Visible Click View > Toolbox. Then Toolbox Window Will Open. Then Add A Data Grid View From Tool Box To The Form.

Now What We Need To Do Is We Should Connect The DataGridView With SQL Server Data Source. Follow The Below Steps Continue It.

Step 02 : Open Server Explorer.

Step 03 : Add A New Data Connection By Right Clicking The Data Connections Tab.

Step 04 : Select The Data Source As "Microsoft SQL Server (SqlClient)" And Select The Server Name. According To SQL Server, Select The Logging Either Windows Authentication Or SQL Server Authentication. Then Enter The Database Name. In My Example I Wanted My Database Name As "Bind Data To A GridView". If You Already Have A Database You Can Simply Select Your Database From Here. But Here I Will Create A New Database. Then Press OK.