Refresh Google Map markers with ASP.Net Ajax Timer control

nauna
 
on Jul 05, 2022 11:25 PM
967 Views

hello

This is my updated code, i used your code, and if you see I have Ajax extender timer on my page which runs after few second and fetch the updated address in TextBoxes, when timer fetches the address in TextBox the map does not load then.

Google Map API: Refresh Google Map markers position without refresh whole map at interval

Please check and advice

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Timer ID="timergoogle" runat="server" Interval="9000" OnTick="timer1_Tick"></asp:Timer>
        <div class="container">
            <div class="row form margintb white-bg padding15 radius">
                <div class="col-md-4 ">
                    <div class="form-group">
                        Seller Current Location:                   
                        <asp:TextBox ID="txtSource" Enabled="false" runat="server" Text=""></asp:TextBox>
                    </div>
                    <div class="form-group">
                        Destination:                         
                        <asp:TextBox ID="txtDestination" Enabled="false" runat="server" Text=""></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <input type="button" class="btn theme-bg f-theme" value="Get Route" onclick="GetRoute()" />
                        <br />
                        <div id="dvDistance">
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div id="dvMap" style="width: 100%; height: 500px">
                    </div>
                    <div id="dvPanel" style="width: 100%;">
                    </div>
                </div>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<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() {
        GetRoute();
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                GetRoute();
            }
        });
    };
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 08, 2022 08:00 AM

Hi nauna,

With Timer Tick event it is not possible to refresh only the markers without refreshing the map.

The complete UpdatePanel content will be refreshed on Timer Tick event.