Refresh Google Map Markers at interval without page refresh in ASP.Net using jQuery Ajax

Hi alex0230,

You need to bind the marker usingjquery AJAX and JavaScript setInterval to refresh at regular interval.

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        BindMarkers();
        setInterval(function () { BindMarkers() }, 3000);
    });
    function BindMarkers() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetMarkerData",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (response) {
                var markers = response.d;
                var mapOptions = {
                    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                    zoom: 5,
                    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);
                }
            }, error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
<div id="dvMap" style="width: 300px; height: 300px">
</div>

Namespaces

C#

using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static List<MarkerData> GetMarkerData()
{
    DataTable dt = GetData("SELECT TOP 2 * FROM Locations ORDER BY NEWID()");
    List<MarkerData> markers = new List<MarkerData>();
    foreach (DataRow dr in dt.Rows)
    {
        markers.Add(new MarkerData
        {
            title = dr["Name"].ToString(),
            lat = Convert.ToDecimal(dr["Latitude"]),
            lng = Convert.ToDecimal(dr["Longitude"]),
            description = dr["Description"].ToString()
        });
    }

    return markers;
}

private static 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;
            }
        }
    }
}

public class MarkerData
{
    public string title { get; set; }
    public decimal lat { get; set; }
    public decimal lng { get; set; }
    public string description { get; set; }
}

VB.Net

<WebMethod>
Public Shared Function GetMarkerData() As List(Of MarkerData)
    Dim dt As DataTable = GetData("SELECT TOP 2 * FROM Locations ORDER BY NEWID()")
    Dim markers As List(Of MarkerData) = New List(Of MarkerData)()
    For Each dr As DataRow In dt.Rows
        markers.Add(New MarkerData With {
            .title = dr("Name").ToString(),
            .lat = Convert.ToDecimal(dr("Latitude")),
            .lng = Convert.ToDecimal(dr("Longitude")),
            .description = dr("Description").ToString()
        })
    Next

    Return markers
End Function

Private Shared Function GetData(ByVal query As String) As DataTable
    Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim cmd As SqlCommand = New SqlCommand(query)
    Using con As SqlConnection = New SqlConnection(conString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using dt As DataTable = New DataTable()
                sda.Fill(dt)
                Return dt
            End Using
        End Using
    End Using
End Function

Public Class MarkerData
    Public Property title As String
    Public Property lat As Decimal
    Public Property lng As Decimal
    Public Property description As String
End Class

Screenshot