Surendra Sharma

Surendra Sharma

Search This Blog

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.

3 comments:

  1. Nice Blog, but i have one question, below..

    How to show indicator(something will be popup), for searched location from longitude & latitude..

    ReplyDelete
    Replies
    1. Thank you Ganesh.

      Please read my article "How to show Info pop up window on Google maps in ASP.NET" from http://surendrasharmadotnet.blogspot.in/2013/08/how-to-show-info-pop-up-window-on.html

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

      Delete
    2. your link is good but not showing any "Image" output.
      If you have any idea, how to show Images from database into Google map with description.

      Delete