Surendra Sharma

Surendra Sharma

Search This Blog

Showing posts with label Tech News. Show all posts
Showing posts with label Tech News. Show all posts

Thursday, August 8, 2013

How to show your photo at any particular position on Google maps in ASP.NET

Original requirement - I received employees information from database and have to show their location using latitude and longitude with their images on Google maps.
         
         
Solution:-

I am avoiding any database related code. Assuming we have latitude and longitude with image [Add image in Solution Explorer].

Most of the points in this article are referred from my previous article How to show any place by latitude and longitude in ASP.NET but still I am rewriting all the points once again for showing image, so that anybody don’t need to visit to that article.

UI Design:-
User enter latitude and longitude as below



27.175114, 78.042154 are latitude and longitude of Tajmahal J

Webpage should display Tajmahal on Google Map as with employee image as below

         
To know how to get Latitude and Longitude of any place in Google maps? Please Visit here
         
Google team already developed API for map and its functionality. These API works with JQuery or Javascript.

How to do this in ASP.NET?

·         First we need two javascript file. You don’t need to download these file

Map functionality - http://maps.google.com/maps/api/js?sensor=false
JQuery - https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

·         So its declaration in ASPX file is as below

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     

·         Get the latitude and longitude from user or file or database and create one point of this latitude and longitude on map [Like X,Y co-ordinates in graph in mathematics]

myLatLng = new google.maps.LatLng(lat, lng);

·         Store image path in variable and create image object for map marker as
myIconSrc = 'SK.ico';
myIcon = new google.maps.MarkerImage(myIconSrc, new google.maps.Size(62, 62), null, new google.maps.Point(0, 62));

·         Set different option of maps like zoom level, alignment of point in map, map type, navigation control as

var mapOptions = {
                    zoom: 15,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true
                };

·         Create map object with all specified optins and show in DIV as below

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

·         Finally attach image on map at the specific location as
marker = new google.maps.Marker({
position: myLatLng,
icon: myIcon,
map: map
});
                                     
Here is complete script. Just copy and paste below ASPX file


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Map</title>
   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btnShow").click(function() {

                myIconSrc = 'SK.ico';
                var lat = document.getElementById("txtLat").value;
                var lng = document.getElementById("txtLng").value;

                myLatLng = new google.maps.LatLng(lat, lng);
                //create the icon object
                myIcon = new google.maps.MarkerImage(myIconSrc, new google.maps.Size(62, 62), null, new google.maps.Point(0, 62));

                //set the map options
                var mapOptions = {
                    zoom: 15,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true
                };

                //create the map object
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                marker = new google.maps.Marker({
                    position: myLatLng,
                    icon: myIcon,
                    map: map
                });
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table width="40%" align="center"
       
        style="border: thin solid #000000; font-family: Verdana; font-size: small;">
        <tr>
            <td>
                <asp:Label ID="lblLat" runat="server" Text="Enter Latitude"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtLat" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLng" runat="server" Text="Enter Longitude"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtLng" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="btnShow" runat="server" Text="Show Place" />
            </td>
        </tr>
    </table>
    <br />
   
    <table align="center" >
        <tr>
            <td>
                <div id="map_canvas" style="width: 700px; height: 500px;">
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>



Please leave your comments or share this tip if it’s useful for you.

Wednesday, August 7, 2013

How to show any place by latitude and longitude in ASP.NET

Recently I come across one requirement where I have to show the place on google place using latitude and longitude in ASP.NET webform.
         
         
Solution:-

Our objective is

User enter latitude and longitude as below




Where 27.175114, 78.042154 are latitude and longitude of Tajmahal J

Webpage should display Tajmahal on Google Map as below

         
To know how to get Latitude and Longitude of any place in Google maps? Please Visit here
         
Google team already developed API for map and its functionality. These API works with JQuery or Javascript.

How to work with Google API in ASP.NET?

·         First we need two javascript file. You don’t need to download these file

Map functionality - http://maps.google.com/maps/api/js?sensor=false
JQuery - https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

·         So its declaration in ASPX page is as below

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     

·         Get the latitude and longitude from user or file or database and create one point of this latitude and longitude on map [Like X,Y co-ordinates in graph in mathematics]

myLatLng = new google.maps.LatLng(lat, lng);

·         Set different option of maps like zoom level, alignment of point in map, map type, navigation control as

var mapOptions = {
                    zoom: 15,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true
                };

·         Finally create map object with all specified optins and show in DIV as below

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                                     
Here is complete code. Just copy and paste below HTML in ASPX file


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Map</title>
   
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btnShow").click(function() {

                var lat = document.getElementById("txtLat").value;
                var lng = document.getElementById("txtLng").value;

                myLatLng = new google.maps.LatLng(lat, lng);

                //set the map options
                var mapOptions = {
                    zoom: 15,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControl: true
                };

                //create the map object
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <table width="40%" align="center"
       
        style="border: thin solid #000000; font-family: Verdana; font-size: small;">
        <tr>
            <td>
                <asp:Label ID="lblLat" runat="server" Text="Enter Latitude"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtLat" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLng" runat="server" Text="Enter Longitude"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtLng" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:Button ID="btnShow" runat="server" Text="Show Place" />
            </td>
        </tr>
    </table>
    <br />
   
    <table align="center" >
        <tr>
            <td>
                <div id="map_canvas" style="width: 700px; height: 500px;">
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>



Please leave your comments or share this tip if it’s useful for you.

How to get latitude and longitude of any place in Google maps?

        
Recently I come across one requirement where I have to show the place on google map using Latitude and Longitude on ASP.NET webform. But the first question I want to know that how can I get latitude and longitude of any place
         
Solution:-
         

Find any place

1. Right click on any desire location on map and click on "What's here?"

2. You will get latitude and longitude of that position in Search textbox as shown in below figure



         
         
Please leave your comments or share this tip if it’s useful for you.

Friday, August 2, 2013

Cycle Clipboard Ring - Secrets of Visual Studio

Least known but yet most powerful facility of Visual Studio is Cycle Clipboard Ring option.

What is Cycle Clipboard Ring?

Can you copy 10 different items in notepad and now paste all 10. You Can’t. L
What you can paste is only last copied item.

But visual studio allows you to paste last 16 copied items. J




In above image, I want to COPY all red arrow lines from bottom to top i.e. from line 132 to 108

Once copied, now I can paste all these items anywhere in Visual studio editors by using Cycle Clipboard Ring.

This option is available in Edit -> Cycle Clipboard Ring or Ctrl + Shift + V
Hold Ctrl + Shift and Press V again and again [Don’t release Ctrl + Shift]




It’s like a circular stack, after pasting last item you should get first item again as below

Please leave your comments or share this tip if it’s useful for you.