Surendra Sharma

Surendra Sharma

Search This Blog

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.

No comments:

Post a Comment