Refresh Google Map markers from database using jQuery Ajax

nauna
 
on Jul 11, 2022 11:33 PM
Sample_115780.zip
598 Views

Hello,

I have this c# code 

protected void getdata()
{
    txtDestination.Text = "Clifton Block 7 karachi";
    txtSource.Text = "PIDC karachi";
}

I want to make Ajax call and update the TextBox value with record from database.

Refresh Google Map markers with ASP.Net Ajax Timer control

Please advice

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 13, 2022 06:47 AM
on Jul 13, 2022 06:48 AM

Hi nauna,

Refer below code.

HTML

<div class="container">
    <div class="row form margintb white-bg padding15 radius">
        <div class="col-md-4 ">
            <div class="form-group">
                Current Location:                  
                <asp:TextBox ID="txtSource" Enabled="false" runat="server" Text="Bandra, Mumbai, India"></asp:TextBox>
            </div>
            <div class="form-group">
                Destination:                        
                <asp:TextBox ID="txtDestination" Enabled="false" runat="server" Text="Andheri, Mumbai, India"></asp:TextBox>
            </div>
            <div class="form-group">
                <div id="dvDistance">
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div id="dvMap" style="width: 100%; height: 300px">
            </div>
            <div id="dvPanel" style="width: 100%;">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=API_Key"></script>
<script type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('<%=txtSource.ClientID%>'));
        new google.maps.places.SearchBox(document.getElementById('<%=txtDestination.ClientID%>'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    });
    var mumbai = new google.maps.LatLng(18.9750, 72.8258);
    var mapOptions = { zoom: 7, center: mumbai };
    var map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);

    function GetRoute() {
        var source, destination;
        source = document.getElementById('<%=txtSource.ClientID%>').value;
        destination = document.getElementById('<%=txtDestination.ClientID%>').value;
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('dvPanel'));
        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;
            }
        });
    }

    setInterval(myURL, 2000);
    function myURL() {
        SetTextBox();
        GetRoute();
    }

    function SetTextBox() {
        $.ajax({
            type: "Post",
            url: "Default.aspx/GetValue",
            data: '{}',
            contentType: "application/Json; Charset=utf-8",
            dataType: "json",
            success: function (response) {
                $('#txtSource').val(response.d.Source);
                $('#txtDestination').val(response.d.Destination);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    };
</script>

Code

C#

[System.Web.Services.WebMethod]
public static object GetValue()
{
    return new { Source = "Mahim, Mumbai, India", Destination = "Malad, Mumbai, India" };
}

VB.Net

<System.Web.Services.WebMethod>
Public Shared Function GetValue() As Object
    Return New With {Key _
        .Source = "Mahim, Mumbai, India", Key _
        .Destination = "Malad, Mumbai, India"
    }
End Function

Screenshot