Easy Code Stuff: July 2015

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.

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

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

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

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

</body>
</html>