How to show Google map in using c#

In this article I'm going to explain how to show google map from databse tables using JavaScript in 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 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" "">
<html xmlns="">
<head id="Head1" runat="server">
<title>How to show google map using</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript">
var Googlemarkers = [
<asp:Repeater ID="GoogleRepeater" runat="server">
"title": '<%# Eval("Name") %>',
"lat": '<%# Eval("Latitude") %>',
"lng": '<%# Eval("Longitude") %>',
"description": '<%# Eval("Description") %>'
<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.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);, marker);
})(marker, data);
<form id="GoogleMapForm" runat="server">
<div id="divGoogleMap" style="width: 600px; height: 600px">


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;
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())
return dt;


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: