aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.Net Populate Google Maps V3 from Database with Multiple Markers

Apr 19, 2015

Here I will explain how to populate or show or add multiple markers to Google maps V3 from database in website using JavaScript or JavaScript populate or Show Google maps with multiple markers from database in


In previous article I explained clearly how to add Google map to website in, Add marker to Google map in website, JavaScript Add multiple markers to google map, jQuery image slideshow in, Sitemap navigation control example in and many articles relating to jQuery, JavaScript, Now I will explain how to populate Google maps from database with multiple markers in website.

Before add multiple markers to Google map from database we need to get Google API key for that please check below url

Once you got the key create new table in your database like as shown below

Column Name
Data Type
Allow Nulls
int(set identity property=true)
Once table creation completed enter some sample data like as shown below

Now write the following code in your aspx to show multiple markers in Google map from database like as shown below 

<html xmlns="">
<title>Show/Add multiple markers to Google Maps from database in website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
<script type="text/javascript" src = "">
<script type="text/javascript">
function initialize() {
var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
//  marker:true
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[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) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);, marker);
})(marker, data);
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
If you observe above code in header section I mentioned multiple latitude and longitudes of different cities and by default I mentioned one city latitude and longitude by using that default details we can center the map to near place of other cities based on that other cities whatever we are going to mark are visible.

In remaining code markers are used to add marking in google map and infowindow is used to show info of all the cities based on the description whatever we mentioned in json string.

Now add following namespaces in code behind

 C# Code

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
After that write the following code in code behind

// This method is used to convert datatable to json string
public string ConvertDataTabletoString()
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=master;Integrated Security=true"))
using (SqlCommand cmd = new SqlCommand("select title=City,lat=latitude,lng=longitude,description from LocationDetails", con))
SqlDataAdapter da = new SqlDataAdapter(cmd);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
row.Add(col.ColumnName, dr[col]);
return serializer.Serialize(rows);


Imports System.Collections.Generic
Imports System.Data
Imports System.Data.SqlClient
Partial Class Default3
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
' This method is used to convert datatable to json string
Public Function ConvertDataTabletoString() As String
Dim dt As New DataTable()
Using con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=master;Integrated Security=true")
Using cmd As New SqlCommand("select title=City,lat=latitude,lng=longitude,description from LocationDetails", con)
Dim da As New SqlDataAdapter(cmd)
Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim row As Dictionary(Of String, Object)
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
row.Add(col.ColumnName, dr(col))
Return serializer.Serialize(rows)
End Using
End Using
End Function
End Class


Asp.Net Populate Google Maps from Database with Multiple Markers
Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

Finally some good explanation and solution :) Thank you very much :)

blogger said...

it is working but tittle no showing on Map

Anonymous said...

i have a error in ConvertDataTabletoString() part to throw not all code paths return a vlue how to i solve it

Anonymous said...


Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.