Hi nauna,
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>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBE1J5Pe_GZXBR_x9TXOv6TU5vtCSmEPW4&callback=myMap"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("div[class=col-md-4]").each(function () {
var latLong = $(this).find('[id*=Label2]').html();
var mapDiv = $(this).find('[id*=googleMap]');
ShowMap(latLong.split(',')[0], latLong.split(',')[1], mapDiv);
});
});
function ShowMap(lat, long, div) {
var LatLng = new google.maps.LatLng(lat, long);
var mapOptions = { center: LatLng, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(div[0], mapOptions);
var marker = new google.maps.Marker({ position: LatLng, map: map, title: "<div style = 'height:30px;width:200px'><b>Latitude : </b>" + lat + "<br/><b>Longitude : </b>" + long + "</div>" });
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
}
</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="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</strong></a>
</h4>
<p><asp:Label ID="Label2" runat="server" Text='<%# Eval("address") %>'></asp:Label></p>
<p>SEE ON MAP</p>
<div id="googleMap" style="width: 100%; height: 200px;"></div>
</div>
</div>
<br />
</div>
</ItemTemplate>
</asp:ListView>
</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", "34.0621507,-118.3135857");
dt.Rows.Add("Mudassar Khan", "34.05128699999999,-118.367134");
dt.Rows.Add("Suzanne Mathews", "34.0720581,-118.3664396");
ListView1.DataSource = dt;
ListView1.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", "34.0621507,-118.3135857")
dt.Rows.Add("Mudassar Khan", "34.05128699999999,-118.367134")
dt.Rows.Add("Suzanne Mathews", "34.0720581,-118.3664396")
ListView1.DataSource = dt
ListView1.DataBind()
End If
End Sub
Screenshot
