In this article I will explain with an example, how to populate and display Google Maps V3 with Multiple Markers using the Latitude and Longitude stored in database in ASP.Net Website.
Database
For this article I have created a Custom database called as LocationDB in which I have created the following table named as Locations.
![Show Google Maps using Latitude and Longitude in ASP.Net]()
In the above table I have inserted Longitude and Latitude information of three different cities, along with their names and descriptions.
![Show Google Maps using Latitude and Longitude in ASP.Net]()
HTML Markup and Google Maps Scripts
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" 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(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[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>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
In the above HTML Markup I have made use of the Google Maps Script to load Google Maps V3 with Multiple Markers. Now in order to populate it from the database I have made use of an ASP.Net Repeater Control to populate the markers array. Thus when the page is rendered in the browser the values from database are loaded within the marker array.
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Populating the Google Maps Marker from SQL Server Database
In the Page_Load event of the ASP.Net Page I am populating the ASP.Net Repeater control using the records from the Locations table of the SQL Server database.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("select * from Locations");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = Me.GetData("select * from Locations")
rptMarkers.DataSource = dt
rptMarkers.DataBind()
End If
End Sub
Private Function GetData(query As String) As DataTable
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim cmd As New SqlCommand(query)
Using con As New SqlConnection(conString)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Function
Screenshot
![Show Google Maps using Latitude and Longitude in ASP.Net]()
Demo
Downloads
