Hi nauna,
Using below two article i have created the example.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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("address") %>'
}
</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: 3,
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>
</head>
<body>
<form id="form1" runat="server">
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<div class="col-md-4">
<div class="item border-3px border-theme-colored p-40 mb-sm-30" style="height: 100%">
<div class="icon-box text-center pl-0 pr-0 mb-0">
<a class="icon icon-circled icon-border-effect effect-circle icon-xl" href="#"><i
class="flaticon-salon-hairdresser-washing-the-hair-of-a-client-with-bubbles-shampoo text-theme-colored">
</i></a>
<h4 class="icon-box-title mt-15 mb-10 letter-space-4 text-uppercase">
<a href="#"><strong>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("name") %>'></asp:Label></strong></a>
</h4>
<p><asp:Label ID="lblAddress" runat="server" Text='<%# Eval("address") %>'></asp:Label></p>
</div>
</div>
<br />
</div>
</ItemTemplate>
</asp:ListView>
<br />
<div id="dvMap" style="width: 100%; height: 500px;"></div>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.AddRange(new System.Data.DataColumn[] {
new System.Data.DataColumn("name", typeof(string)),
new System.Data.DataColumn("address",typeof(string)) });
dt.Rows.Add("John Hammond", "Marietta (Georgia, USA)");
dt.Rows.Add("Mudassar Khan", "266 South Winton Road, Rochester, NY, 14");
dt.Rows.Add("Suzanne Mathews", "Elmwood Boulevard, Deseronto, ON, K0K1X0");
dt.Rows.Add("Robert Schidner", "Karachi, Pakistan");
dt.Rows.Add("Howard Snyder", "Gering, NE, USA");
dt.Rows.Add("Karl Jablonski", "Hill Crescent, Toronto, ON, M1M1J3");
dt.Columns.Add("Latitude");
dt.Columns.Add("Longitude");
foreach (System.Data.DataRow dr in dt.Rows)
{
string address = dr["address"].ToString();
string url = "https://maps.google.co.in/maps/api/geocode/xml?address=" + address + "&key=API_Key";
System.Net.WebRequest request = System.Net.WebRequest.Create(url);
using (System.Net.WebResponse response = (System.Net.HttpWebResponse)request.GetResponse())
{
using (System.IO.StreamReader reader = new System.IO.StreamReader(response.GetResponseStream(), System.Text.Encoding.UTF8))
{
System.Data.DataSet dsResult = new System.Data.DataSet();
dsResult.ReadXml(reader);
System.Data.DataTable location = dsResult.Tables["location"];
dr["Latitude"] = location.Rows[0]["lat"];
dr["Longitude"] = location.Rows[0]["lng"];
}
}
}
ListView1.DataSource = dt;
ListView1.DataBind();
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As System.Data.DataTable = New System.Data.DataTable()
dt.Columns.AddRange(New System.Data.DataColumn() {New System.Data.DataColumn("name", GetType(String)), New System.Data.DataColumn("address", GetType(String))})
dt.Rows.Add("John Hammond", "Marietta (Georgia, USA)")
dt.Rows.Add("Mudassar Khan", "266 South Winton Road, Rochester, NY, 14")
dt.Rows.Add("Suzanne Mathews", "Elmwood Boulevard, Deseronto, ON, K0K1X0")
dt.Rows.Add("Robert Schidner", "Karachi, Pakistan")
dt.Rows.Add("Howard Snyder", "Gering, NE, USA")
dt.Rows.Add("Karl Jablonski", "Hill Crescent, Toronto, ON, M1M1J3")
dt.Columns.Add("Latitude")
dt.Columns.Add("Longitude")
For Each dr As System.Data.DataRow In dt.Rows
Dim address As String = dr("address").ToString()
Dim url As String = "https://maps.google.co.in/maps/api/geocode/xml?address=" & address & "&key=API_Key"
Dim request As System.Net.WebRequest = System.Net.WebRequest.Create(url)
Using response As System.Net.WebResponse = CType(request.GetResponse(), System.Net.HttpWebResponse)
Using reader As System.IO.StreamReader = New System.IO.StreamReader(response.GetResponseStream(), System.Text.Encoding.UTF8)
Dim dsResult As System.Data.DataSet = New System.Data.DataSet()
dsResult.ReadXml(reader)
Dim location As System.Data.DataTable = dsResult.Tables("location")
dr("Latitude") = location.Rows(0)("lat")
dr("Longitude") = location.Rows(0)("lng")
End Using
End Using
Next
ListView1.DataSource = dt
ListView1.DataBind()
rptMarkers.DataSource = dt
rptMarkers.DataBind()
End If
End Sub
Screenshot
