Hello,
This is my complete code for Google map load, i want to keep refreshing the Google map after 3 second interval but it creates jurk
I want only marker should update between start and end point not the whole Google map should load and create jerk.
It means when update panel refresh it refreshes whole Google map whereas i want just marker should be updated not complete div of map should reload.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="timergoogle" runat="server" Interval="3000" 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">
Current Location:
<asp:TextBox ID="txtSource" runat="server" Text="Bandra, Mumbai, India"></asp:TextBox>
</div>
<div class="form-group">
Destination:
<asp:TextBox ID="txtDestination" runat="server" Text="Andheri, Mumbai, India"></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 source, destination;
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 });
});
function GetRoute() {
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapOptions = {
zoom: 7,
center: mumbai
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById('<%=txtSource.ClientID%>').value;
destination = document.getElementById('<%=txtDestination.ClientID%>').value;
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);
}
});
//*********DISTANCE AND DURATION**********************//
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;
} else {
alert("Unable to find the distance via road.");
}
});
}
</script>
<script>
setTimeout(myURL, 2000);
function myURL() {
GetRoute();
}
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
GetRoute();
}
});
};
</script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(beginRequest);
function beginRequest() {
prm._scrollPosition = null;
}
</script>