Aug 13, 2015

Getting The Distance Between Two Locations Using Google MAP API

Following example will help you to get distance between two location using 'googleapi' in java script. Please note that this is distance between two location. This is not the direction to travel or something.

Now lets have a look on code. In this example I have created four text fields to get the Latitude and Longitude of from location and To location.

I have used the online java script library of google map api library.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
 <head>
  <title>Getting The Distance 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="Calculate Distance" onclick="getDistance()"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      function getDistance() {
          var fromLocation = new google.maps.LatLng($("#fromLat").val(), $("#fromLng").val());
          var toLocation = new google.maps.LatLng($("#toLat").val(), $("#toLng").val());
          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
  </script>
 </body>
</html> 

Just copy the code and create a html file and open in the browser. Enter the Latitude and Longitude of From and To locations and click the 'Calculate Distance' button.



If you want you can improve the code by sending the Latitude and Longitude of From and To locations by using a method and get the distance.



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 Nearest Places For A Location In Google Map Using Google MAP API

Following example will help you to develop your own 'Google Map' to get the nearest places of a location by latitude and longitude using java script.

"mylocation" variables contains the location you want to search for places. In this example first it will load the map and center it to your given latitude and longitude. After loading the map it will create the marker in the map of the location searched. This is happening in the "setCurrentLocation()" function. If you want, you can get rid of this method, if you don't want to show your location on the map.

Then we should request details from " google.maps.places.PlacesService". In the request you should specify your location and types. In my example I have used types such as 'train_station', 'bus_station' and 'subway_station'.You can find more types here.

In the request I have specified another parameter called 'rankBy'. This will sort the results your getting. In my example I have specified 'google.maps.places.RankBy.DISTANCE', which will sort the results by nearest to the place search.

Now lets have a look on code.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
    <title>Getting The Nearest Places For A Location 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: 100%;"></div>
    <script type="text/javascript">
        var map;
        var infowindow;
        var service ;
        var mylocation = new google.maps.LatLng(6.928940573589038, 79.87219331750487);
        //Set Your Current Location to 'mylocation'
        getGooglePlaces();

        function getGooglePlaces(lat,lng)
        {      
            //load the map
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: mylocation,
                zoom: 15
            });
     
            infowindow = new google.maps.InfoWindow();
            service = new google.maps.places.PlacesService(map);
    
            setCurrentLocation();
  
            var request = {
                location: mylocation,
                rankBy: google.maps.places.RankBy.DISTANCE,
                types: ['train_station','bus_station','subway_station'] 
                //More Types From
                //https://developers.google.com/places/supported_types
            };
            service.search(request, callback_googlePlaces);
        }
   
        function setCurrentLocation() {
            var marker = new google.maps.Marker({
                map: map,
                position: mylocation,
                icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000',
                animation: google.maps.Animation.DROP
            });

            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>Current Place</strong>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        }

        function callback_googlePlaces(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                animation: google.maps.Animation.DROP
            });
    
            google.maps.event.addListener(marker, 'click', function() {
                var content='<strong>' + place.name + '</strong><br/>' + '<span>' + place.vicinity + '</span><br/>' + '<span>' + place.types[0] + '</span><br/>' + '<span>' + google.maps.geometry.spherical.computeDistanceBetween(mylocation, place.geometry.location).toFixed(2) + ' meters</span>';
                infowindow.setContent(content);
                infowindow.open(map, this);
            });
        } 
   
    </script>
</body>
</html>

In this example I have used the 'googleapis' online. So no need to include any java script files. Copy the code and save as a html file. Just open the file in the browser. You will see the below result.




If you click the marker you will get a info window which shows you the distance.
Please note that this distance is direct distance. This is not the direction distance.
That mean travelling distance.

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

Jul 24, 2015

Getting The Address Of Selected Location In Google Map Using Google Map API v3

Following Example Will Help You To Develop Your Own Google Map To Get The Address Of A Location Including Latitude And Longitude. Before Using Make Sure You have Downloaded The "jquery.gmap3.min.js" Java Script File.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html>
<head>
    <title>Google Map v3</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false& libraries=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="width: 100%; height: 500px;"></div>
    Street :<input type="text" id="street" />
    City :<input type="text" id="city"/>
    State :<input type="text" id="state" />
    Country :<input type="text" id="country" />
    Latitude :<input type="text" id="lat" />
    Longitude :<input type="text" id="lng"/>

    <script type="text/javascript">

         var componentForm = {
           street_number: 'short_name',
           route: 'long_name',
           locality: 'long_name',
           administrative_area_level_1: 'long_name',
           country: 'long_name'
         };

         var map;
         var lat = 6.929537;//Set Default Latitude To Start
         var lon = 79.866271;//Set Default Longitude To Start
         var str = '[{ "lat" :"' + lat + '","lng" :"' + lon + '"}]';
         str = JSON.parse(str);
       
         jQuery('#map-canvas').gmap3({
            marker: {
               values: str,
               options: {
                 icon:'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                 draggable:true
               },
               events:{
                 dragend: function(marker){
                   $('#lat').val(marker.getPosition().lat());
                   $('#lng').val(marker.getPosition().lng());
                   $(this).gmap3({
                     getaddress:{
                       latLng:marker.getPosition(),
                       callback:function(results){
                         printAddress(results[0]);
                       }
                     }
                   });
                 }
               },
            },
            map: {
               options: {
                 zoom: 14,
                 scrollwheel: true,
                 streetViewControl: true
               }
            }
        });

        function printAddress(place){
            var streetnumber = "";
            var streetname = "";
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if(addressType == "street_number"){
                  streetnumber = place.address_components[i][componentForm[addressType]];
                }else if(addressType == "route"){
                  streetname = place.address_components[i][componentForm[addressType]];
                }else if(addressType == "locality"){
                  $("#city").val(place.address_components[i][componentForm[addressType]]);
                }else if(addressType == "administrative_area_level_1"){
                  $("#state").val(place.address_components[i][componentForm[addressType]]);
                }else if(addressType == "country"){
                  $("#country").val(place.address_components[i][componentForm[addressType]]);
                }
                if(streetnumber != "" && streetname !=""){
                  $("#street").val(streetnumber + " , " + streetname);
                }
                else{
                  $("#street").val(streetnumber + streetname);
                }
            }
        }
    </script>
</body>
</html>




This Is Simple Example That Gets You The Address Of A Selected Place Using Google Map.You Can Drag The Marker Position As You Want.Then It Will Get You The Updated Marker Position And It Will Give You The Address Of The Location.This Uses A 'Dragend' Function.There Are Lot Of Functions Associated With Google Maps.


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 Selected Latitude And Longitude From Google Map Using Google Map API v3

Following example will help you to create a Google Map which has picker to find the latitude and longitude.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
  <head> 
    <title>Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3</title> 
    <script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
  </head> 
  <body>
    <div id="map-canvas" style="width:100%;height:500px;"></div>
    Latitude  : <input type="text" id="lat"/>
    Longitude  : <input type="text" id="lng"/>
   
    <script type="text/javascript">
        var lat = 6.929537; //Your Location Latitude
        var lon = 79.866271; //Your Location Longitude
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
            center: latlng,
            zoom: 15
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, "dragend", function (event) {
            document.getElementById("lat").value = event.latLng.lat();
            document.getElementById("lng").value = event.latLng.lng();
        });
  
    </script>
  </body>
</html>




This Is Simple Example That Shows The Given Location Using A Marker.You Can Drag The Marker Position As You Want.Then It Will Get You The Updated Marker Position.This Uses A 'Dragend' Function.There Are Lot Of Functions Associated With Google Maps.


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

[Solution] Get Hourly Time By Giving 24 Hour Time


Just Pass Your 24 hour Time to This Function It Will Return You The Desired Data.

eg 1300 - 1.00 PM
eg 0100 - 1.00 AM


function getHourlyTime(time){
    var Hours = parseInt(time / 100);
    var Minutes  = time % 100;
    if(Minutes <10){
        Minutes = '0'+Minutes;
    }
    if(Hours == 0){
        return '12:'+Minutes+' AM';
    }else if(Hours < 10){
        return '0'+Hours+':'+Minutes+' AM';
    }else if(Hours < 12){
        return Hours+':'+Minutes+' AM';
    }else if(Hours == 12){
        return '12:'+Minutes+' PM';
    }else{
        Hours = Hours -12;
        if(Hours < 10){
            return '0'+Hours+':'+Minutes+' PM';
        }else if(Hours < 12){
            return Hours+':'+Minutes+' PM';
        }
    }
}



Done By +Nifal Nizar

Jul 16, 2015

[Working] Draw Pie Chart in Html

Hi, Today i will be guiding you how to draw a pie chart using flot.js plugin.

Download Flot.js and link these the files in you html file like below.

<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot.pie.js"></script>

i will explain u a basic ,  there are more designs u could refer from the link below.

<html>
<head>
<style>
            .demo-placeholder {
                width: 100%;
                height: 100%;
                font-size: 14px;
                line-height: 1.2em;
            }

            .demo-container {
                box-sizing: border-box;
                width: 300px;
                height: 300px;
                padding: 20px 15px 15px 15px;
                /*margin: 15px auto 30px auto;*/
                border: 1px solid #ddd;
                background: #fff;
                background: linear-gradient(#f6f6f6 0, #fff 50px);
                background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
                background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
                background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
                background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
                box-shadow: 0 3px 10px rgba(0,0,0,0.15);
                -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
                -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
                -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
                -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            }
        </style>
<script>

     var data = [];

      data.push({ label: "option 1", data:"57" });
      data.push({ label: "option 2", data: "14" });
      data.push({ label: "option 3", data: "29" });

     var placeholder = $("#placeholder");
     placeholder.unbind();

                $.plot(placeholder, data, {
                    series: {
                        pie: {
                            show: true,
                            radius: 1,
                            label: {
                                show: true,
                                radius: 3 / 4,
                                formatter: labelFormatter,
                                background: {
                                    opacity: 0.5,
                                    color: "#000"
                                }
                            }
                        }
                    },
                    legend: {
                        show: false
                    }
                });


            });

function labelFormatter(label, series) {
 return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}

</script>

</head>
<body>
     <div class="demo-container" >
            <div id="placeholder" class="demo-placeholder"></div>        
        </div>
</body>
</html>




More info on : http://www.flotcharts.org/flot/examples/series-pie/index.html

[Example] Bootstrap Tabs

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>
</html>

Jun 19, 2015

[Working Solution] Using Email Templates In C Sharp

Hi, I have been working lately with some Email Template Techniques in C#, and i have found this very simple and easy to use. So I will we be sharing hot this is going to work.

I have already covered how to send email in c#, you will be needing that also to understand this,
if u had gone through that then it is fine or else follow it here. [Send Email C#]


In this article I will explain how to send HTML Formatted emails. Now a day’s many websites sent newsletters, promotional emails. These emails containing Rich Text content and images
So let’s start with it.
Email Body HTML Template
Firstly you will need to build an HTML Template of the body which will have some placeholders which will be replaced with the actual content. Advantage of creating templates instead of building HTML using String Builder in code is that you can easily change the HTML of the template without changing the code.

<html>
<body style="color:grey; font-size:15px;">
<font face="Helvetica, Arial, sans-serif">
<div style="background-color: #ece8d4; width:600px; height:200px; padding:30px; margin-top:30px;">
<p>Hi {UserName},<p>
<p>You Have Been Added As A User In eProject Manager Application</p>
<p>    
UserName : {LoginId}
Password : {Password}
<br>
<br/>
<p>Thank you</p>
</div>
</body>
</html>

Above you will notice in YELLOW I have created the following three placeholders in the HTML Email template.
{UserName} – Name of the recipient
{LoginId} – Id used for the login
{Password} – Password for login
We are now almost done. Now the only thing we need to do is replace the placeholders with their actual values and send the email.
Populating the HTML Formatted Body
On the click event handler of a button I will first read the HTML Template file and then replace the placeholders with their values.
public string PopulateBody(string userName, string loginid, string pass)
{
string body = string.Empty;
using (StreamReader reader = new StreamReader(Server.MapPath("~/EmailTemplate.htm")))
    {
        body = reader.ReadToEnd();
    }
    body = body.Replace("{UserName}", userName);
    body = body.Replace("{LoginId}", loginid);
    body = body.Replace("{Password}", pass);
    
    return body;
}

With that the email template is complete.. you simply have to pass the return of this function to the email's message bode section.

View this link so you will be able to understand the sending email section too. [Send Email C#]

  MailMessage message = new MailMessage();
  message.IsBodyHtml = true;
  message.Body = PopulateBody('Hudhaifa','hudhaifa93','123456789');

 Now the email body will contain ur email template with your parameters passed..

Hope this is useful for the reader.

Any Problem,Suggestion or Help , Do not hesitate, Drop a mail.


May 21, 2015

[Fixed Solution] : Remove IE's “Clear Button X” From Inputs

This Article Will Give You A Solution To Remove The Internet Explorer's Clear Button "X" On Inputs.

First Will Have A Look On The Issue.
Following HTML Code Lines Will Create A Simple Text Field On The Browser.

<html>
<body>
<input type="text" id="myInput">
</body>
</html>

First Have A Look On The Browsers Like Google Chrome Or Mozilla Firefox.
Type Some Thing In The Text Field.

But Check The Same thing In The Internet Explorer.You Will See The Following Output.
Sometimes This Clear Button Will Annoying You If Your Input Field Has Auto Complete Events.
You Can Add The Follwing CSS Styles To Get Rid Of The Clear Button In The Input Fields In The Internet Explorer.

#myInput::-ms-clear {
    display: none;
}

JWT Token Decode Using Jquery

When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share...