c# - scrolling div issue when the google map direction details are displayed -

text after "itemprop =" text ">

I have a Google Map which is a marker address and there is a text input that takes the destination address to display with is. When GetDirections is clicked on the button, then I get the information in the direction div The code is as follows: asp.net:

  & lt; Table & gt; & Lt; TR & gt; & Lt; td width = "500" & gt; & Lt; Div id = "map-container" style = "width: 500px; height: 320px; border: 1 px solid black" & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; td width = "280" & gt; & Lt; Div id = "directions-panel" style = "width: 90px; visibility: hidden; height: 320px; overflow: automatic, border: 1px solid black" & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; Table width = "300" style = "margin-left: 460px;" & Gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; div class = "label" & gt; Enter the address to get directions: & lt; / Div & gt; & Lt; Div id = "panel" style = "width: 280px; height: 30px; range: 1px solid #CECECE;" & Gt; & Lt; Div & gt; & Lt; input id = "end" size = "0" & ​​gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; Div & gt; & Lt; Input type = "button" value = "get directions" onclick = "cummap (); calculate ();" Style = "width: 190px; background: # d0cfc8; color: # 000000;" & Gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt;   
 Javascript code:  
  var lat = '<% = m_lat%>', tall = '& lt;% = m_long% & Gt; ' ; Var mycenter = new google.maps.LatLng (latitude, long); Var Directions = New google.maps.DirectionsRenderer (); Var Directions service = new google.maps.DirectionsService (); Function initialize () {var mapProp = {zoom: 7, panControl: true, zoomControl: true, zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE}, map type control: true, scale control: true, street view controller: true , Observationmap control: true, rotate control: true, center: myCenter, mapTypeId: google.maps.MapTypeId.HYBRID}; Var map = new google.maps.Map (document.getElementById ("map-container"), mapProp); Var Geocoder = new google.maps.Geocoder (); Geocoder.geocode ({'latLng': myCenter}, function (result, status) {if (result! = Null) {result = result [0]; if (result! = Null) {var strFullAddress = '& lt;% = M_Address% & gt; '; document.getElementById (' hdnUserAddress'). Value = strFullAddress;}} var Marker = New google.maps.Marker ({status: myCenter, title: "latlng:" + mycenter + "You" + Document.getElementById ('hdnUserAddress') value}); marker.setMap (map); infowindow = new google.maps.InfoWindow ({content: "& lt; b & gt; address & lt; / b & gt; Lt; br / & gt; "+ Document.getElementById ('hdnUserAddress') value}); google.maps.event.addListener (marker, 'click', function) {infowindow.open (map, marker);}); }); directionsDisplay.setPanel (document.getElementById ('directions panel')); directionsDisplay.setMap (map); } Function lessmap () {document.getElementById ("map-container"). Style.width = "320px"; Document.getElementById ("Instruction-panel"). Style.width = "280px"; Document.getElementById ("Instruction-panel"). Style.visibility = 'visible'; } Function calcRoute () {var start = '& lt;% = m_Address%>'; Var end = document.getElementById ('end'). value; Var request = {origin: start, destination: end, travel mode: google.maps.TravelMode.DRIVING}; DirectionsService.route (request, function (response, status) {if (position == google.maps.DirectionsStatus.OK) {directionsDisplay.setDirections (response);}}); } Google.maps.event.addDomListener (window, 'load', start); The problem is: When the guidelines are displayed, Google Maps shows directions in the direction-panel div with the left, right arrows and when I try to scroll the div, So arrows are not fixed, they also keep moving forward. I feel that whenever I scroll, arrows should be fixed there. Can anyone help me with this?   
 
 
 I added a style tag to my page after following the Google API script for Google Maps Load And my problem is fixed for the browser:  
  / * Override the Google Maps icon style / / .adp-substep .adp-stepicon .adp-maneuver {position: static; } / * Override Google Map Icon Container Style * / .adp-substep .adp-stepicon {Status: Fixed; }