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.
