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.
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>