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