Solution:-
I received
some comments requesting for how to show pop up info window on click of some latitude
and longitude position on Google Map in ASP.NET webform.
Latitude
and longitude, showing image on google maps are necessary base part of displaying
Info window. So some points in this article are refered from my previous two article
How to show any place by latitude and longitude in ASP.NET and How
to show your photo at any particular position on Google maps in ASP.NET ,
but still I am rewriting all the points once again for showing image and info
window, so that anybody don’t need to visit to that article.
However
I am avoiding database related code. Assuming we have latitude and longitude
with image [Add image in Solution Explorer] and
employee information.
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 with image and employee
information [marked in red lines] 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 using C#?
C# Code
·
Create Employee Entity
class Get employee information in entity class from database
public class Employee
{
public string Name { get; set; }
public string Address { get;
set; }
public string LogoLink { get;
set; }
public int Age { get; set; }
public string Website { get;
set; }
}
·
Create one Helper class
for creating JSON string and registering Javascript.
Include namespcase “using
System.Web.Script.Serialization;” in your code for accessing “JavaScriptSerializer” class
public static
class Helper
{
/// <summary>
/// Generates Json for
specific object instance
/// </summary>
/// <param name="instance">Instance to be converted to Json </param>
/// <param name="recursionDepth">Recursion depth optional paramter</param>
/// <returns>Json for
specific object instance</returns>
public static string ToJson(this object instance, int
recursionDepth) {
JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.RecursionLimit = recursionDepth;
return serializer.Serialize(instance);
}
/// <summary>
/// Register java script
/// </summary>
/// <param name="script"></param>
/// <param name="control"></param>
public static void BindClientScript(string
script, Control control)
{
ScriptManager.RegisterStartupScript(control, typeof(Page), Guid.NewGuid().ToString(), script, true);
}
}
·
Get employee information
in entity class from database [Leaving database access part]
Employee objEmployee = new Employee() {
Name = "Alex",
Address = "Pune",
Age = 30,
LogoLink = "http://dev.windowsphone.com/a/nv/microsoftlogo_91x15.png",
Website = "http://surendrasharmadotnet.blogspot.in/"
};
·
Convert this employee entity
into its JSON representation as below
string jsonEmployeeResponse = Helper.ToJson(objEmployee, 100);
·
Register javascript
function by passing this Json string as below
string script = "PushEmployeeData("
+ jsonEmployeeResponse + ");";
Helper.BindClientScript(script, this);
ASPX
·
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>
·
Create javascript function
to get the JSON string and hold it in javascript global variable as
employee = null;
function PushEmployeeData(objEmployee) {
employee =
objEmployee;
}
·
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 icon path in
variable and icon object for map marker image as
myIconSrc = 'SK.ico';
myIcon = new google.maps.MarkerImage(myIconSrc, new google.maps.Size(62, 62), null, new google.maps.Point(0,
62));
·
Create HTML to show
employee info in info popup window, sreate one DIV and assign all required info
as below
var
infoWindowText = ''
+ '<div
style="border: thin solid #000000; font-family: Verdana; font-size:
small;background-color:lightblue"> '
+ '<span
style="color:red"> Name :' + employee.Name + '</span><br> Current Address : '
+ employee.Address + '<br /> Age : '
+ employee.Age + '<br /> My Website : '
+ ((employee.Website != '') ? ('<a
href="' + employee.Website + '"
class="red" target="_blank">'
+ employee.Website + '</a>') : '')
+ '<br
/> Image: <img id="mySnap" alt="Microsoft"
src="' + employee.LogoLink + '"/>'
+ '</div>';
·
Create info window object
as below
infoWindow = new
google.maps.InfoWindow({ disableAutoPan: true
});
·
Assign all HTML content to
this info window object as
infoWindow.setContent(infoWindowText);
·
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);
·
Attach image on map at the
specific location as
marker = new google.maps.Marker({
position:
myLatLng,
icon:
myIcon,
map: map
});
·
Register click event on
marker image for calling Info window function so that whenever user click on
some latitude and longitude position , show pop up info window on Google Map
google.maps.event.addListener(marker,
'click', function(e)
{ showInfoWindow() });
·
Function to show info
winfow as below
function
showInfoWindow() {
infoWindow.open(map, marker);
}
Here
is complete C# code and ASPX. Just copy and paste below code and bingooooo here
you go
C# Code
public partial class ShowMap : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
Employee
objEmployee = new Employee()
{
Name = "Alex",
Address = "Pune",
Age = 30,
LogoLink = "http://dev.windowsphone.com/a/nv/microsoftlogo_91x15.png",
Website = "http://surendrasharmadotnet.blogspot.in/"
};
string
jsonEmployeeResponse = Helper.ToJson(objEmployee,
100);
string
script = "PushEmployeeData(" +
jsonEmployeeResponse + ");";
Helper.BindClientScript(script,
this);
}
}
public class Employee
{
public string Name { get; set; }
public string Address { get;
set; }
public string LogoLink { get;
set; }
public int Age { get; set; }
public string Website { get;
set; }
}
public static class Helper
{
/// <summary>
/// Generates Json for specific object instance
/// </summary>
/// <param
name="instance">Instance to be
converted to Json </param>
/// <param
name="recursionDepth">Recursion
depth optional paramter</param>
/// <returns>Json for specific object instance</returns>
public static string ToJson(this object instance,
int recursionDepth)
{
JavaScriptSerializer
serializer = new JavaScriptSerializer();
serializer.RecursionLimit =
recursionDepth;
return
serializer.Serialize(instance);
}
/// <summary>
/// Register java script
/// </summary>
/// <param
name="script"></param>
/// <param
name="control"></param>
public static void
BindClientScript(string script, Control control)
{
ScriptManager.RegisterStartupScript(control,
typeof(Page),
Guid.NewGuid().ToString(), script, true);
}
}
ASPX
<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">
employee = null;
function
PushEmployeeData(objEmployee) {
employee = objEmployee;
}
$(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));
var
infoWindowText = ''
+ '<div
style="border: thin solid #000000; font-family: Verdana; font-size:
small;background-color:lightblue"> '
+ '<span
style="color:red"> Name :' + employee.Name + '</span><br> Current Address : '
+ employee.Address + '<br /> Age : '
+ employee.Age + '<br /> My Website : '
+ ((employee.Website != '') ? ('<a
href="' + employee.Website + '"
class="red" target="_blank">'
+ employee.Website + '</a>') : '')
+ '<br
/> Image: <img id="mySnap" alt="Microsoft"
src="' + employee.LogoLink + '"/>'
+ '</div>';
infoWindow = new google.maps.InfoWindow({ disableAutoPan: true }); //create the
infowindow object
infoWindow.setContent(infoWindowText);
//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
});
google.maps.event.addListener(marker, 'click',
function(e) { showInfoWindow() });
return
false;
});
});
function
showInfoWindow() {
infoWindow.open(map, marker);
}
</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.
