Populate Google Maps with multiple Markers inside Repeater using JavaScript and jQuery in ASP.Net

Hi marouane,

Refer below sample code.

HTML

<asp:Repeater ID="Repeater1" 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>
                    <div id="googleMap" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
            <br />
        </div>
    </ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAc0rzzasqjUZR6PlrmrPLGRKw8ZiOph3o"></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 latLngs = $(this).find('[id*=Label2]').html();
            var markers = [];
            for (var j = 0; j < latLngs.split(',').length ; j++) {
                var marker = {};
                marker.lat = latLngs.split(',')[j];
                marker.lng = latLngs.split(',')[j + 1];
                j = j + 1;
                markers.push(marker);
            }

            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map($(this).find('[id*=googleMap]')[0], mapOptions);

            //Create and open InfoWindow.
            var infoWindow = new google.maps.InfoWindow();

            for (var 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: "<div style = 'height:30px;width:200px'><b>Latitude : </b>" + data.lat + "<br/><b>Longitude : </b>" + data.lng + "</div>"
                });

                //Attach click event to the marker.
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(marker.title);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        });
    });
</script>

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("Hassan", "33.65432,66.65432,66.432223,96.543234,31.543214,68.65433");
        dt.Rows.Add("Hassan 1", "33.65432,66.65432,66.432223,96.543234,31.543214,68.65433");
        Repeater1.DataSource = dt;
        Repeater1.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("Hassan", "33.65432,66.65432,66.432223,96.543234,31.543214,68.65433")
        dt.Rows.Add("Hassan 1", "33.65432,66.65432,66.432223,96.543234,31.543214,68.65433")
        Repeater1.DataSource = dt
        Repeater1.DataBind()
    End If
End Sub