How to show Google map in asp.net using c#
In this article I'm going to explain how to show google map from databse tables using JavaScript in asp.net.Google map is a web mapping server application and technology provided by google.
In this article I'm going to explain how to show google map from databse tables using JavaScript in asp.net.Google map is a web mapping server application and technology provided by google. Some of the default control of google maps as follows
1)Zoom - Display a slider or + or - buttons to control the zooom level of the map.
2)Pan- dispaly the pan control for panning the map
3)Map type-there are two types of map one is road map another one is satellite map.
4)Street view-displays a Pegman icon which can be dragged to the map to enable Street View
If you wan to disable default control of google map the you need to set disableDefaultUI:true,
Create Table For Google map
Create Table GoogleMap(AutoID int identity(1,1),Name NVarchar(100),Latitude Numeric(18,6),
Longitude Numeric(18,6),Description Nvarchar(250))
Insert some values to Googlemap table
Insert into GoogleMap values('Chennai','12.897400','80.288000','Chennai super kings')
Insert into GoogleMap values('Bangalore','12.897400','77.519500','Royal Challengers Bangalore')
Insert into GoogleMap values('Hyderabad','17.266700','78.530200','hyderabad deccan')
Insert into GoogleMap values('Mumbai','18.964700','72.825800','Mumbai Indians')
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to show google map using asp.net</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var Googlemarkers = [
<asp:Repeater ID="GoogleRepeater" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Name") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
"description": '<%# Eval("Description") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(Googlemarkers[0].lat, Googlemarkers[0].lng),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("divGoogleMap"), mapOptions);
for (i = 0; i < Googlemarkers.length; i++) {
var data = Googlemarkers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
</head>
<body>
<form id="GoogleMapForm" runat="server">
<div id="divGoogleMap" style="width: 600px; height: 600px">
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dtGoogleMap = this.GetDataFromDatabase("select * from GoogleMap");
GoogleRepeater.DataSource = dtGoogleMap;
GoogleRepeater.DataBind();
}
}
private DataTable GetDataFromDatabase(string sqlquery)
{
string connectinString = "Data Source=servername;Initial Catalog=master;Persist Security Info=True;User ID=sa;Password=p@ssw0rd";
SqlCommand sqlcmd = new SqlCommand(sqlquery);
using (SqlConnection con = new SqlConnection(connectinString))
{
using (SqlDataAdapter da = new SqlDataAdapter())
{
sqlcmd.Connection = con;
da.SelectCommand = sqlcmd;
using (DataTable dt = new DataTable())
{
da.Fill(dt);
return dt;
}
}
}
}
}