public void drawmap(string users) { mapwithanimation = ""; string sb = ""; try { DataTable dt = new DataTable(); // Query to get the user longlat of User ibuckethead bucket = new ibuckethead(); //if (Request.QueryString["userid"] != "") //{ dt = bucket.BindoboutGrid(@"Select case when d.siteid='NA' then vid else d.siteid end , d.lat,d.long,ldate,ltime from distance d inner join users u on u.userid = d.userid left outer join atms a on a.siteid=d.siteid where d.userid like '" + users + @"' and ldate=Convert(date,'" + txt_frmDate.Text + @"') and d.lat <> '0' and d.long <> '0' order by Ltime "); /*Response.Write(@"Select case when d.siteid='NA' then vid else d.siteid end , * d.lat,d.long,ldate,ltime from distance d * inner join users u on u.userid = d.userid * left outer join atms a on a.siteid=d.siteid * where d.userid like '" + users + @"' * and ldate=Convert(date,'" + txt_frmDate.Text + @"') * and d.lat <> '0' and d.long <> '0'");*/ //} ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //GOOGLE MAP Specific Code will come here string usercoor = ""; string path = ""; if (dt.Rows.Count > 0) { // usercoor += "['" + dt.Rows[0][0].ToString() + "'," + dt.Rows[0][1].ToString() + "," + dt.Rows[0][2].ToString() + "],"; // usercoor += "['" + dt.Rows[0][0].ToString() + "'," + dt.Rows[dt.Rows.Count - 1][1].ToString() + "," + dt.Rows[dt.Rows.Count - 1][2].ToString() + "]"; for (int i = 0; i < dt.Rows.Count; i++) { //path += "{ lat: " + dt.Rows[i][1].ToString() + ", lng: " + dt.Rows[i][2].ToString() + "},"; usercoor += "['" + dt.Rows[i][0].ToString() + "'," + dt.Rows[i][1].ToString() + "," + dt.Rows[i][2].ToString() + "],"; } } string sql = @"select l_lat,l_long from locationhist where userid='" + users + @"' and convert(date,l_date)='" + txt_frmDate.Text + @"' and convert(time,l_time) between '" + dt.Rows[0][4].ToString() + "' and '" + dt.Rows[dt.Rows.Count - 1][4].ToString() + @"' order by CONVERT(time, replace(l_time,' ','')) asc"; dt = null; //Response.Write("-----------------"+sql); dt = bucket.BindoboutGrid(sql); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { path += "{ lat: " + dt.Rows[i][0].ToString() + ", lng: " + dt.Rows[i][1].ToString() + "},"; } } mapwithanimation = @"<script> try{ function initMap() { var userCoor = [ " + usercoor.TrimEnd(',') + @"]; var map = new google.maps.Map(document.getElementById('map'), { center: { lat: " + dt.Rows[0][0].ToString() + @", lng: " + dt.Rows[0][1].ToString() + @" }, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. var a= 0; var lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 2, strokeColor: '#0000FF' }; // Create the polyline and add the symbol to it via the 'icons' property. var line = new google.maps.Polyline({ path: [ " + path.TrimEnd(',') + @" ], // path: [ { lat: 18.45202353, lng: 73.81140579 }, { lat: 23.0921453, lng: 72.5901526 }], icons: [{ icon: lineSymbol, offset: '100%' }], strokeColor: '#FF0000', map: map }); var infowindow = new google.maps.InfoWindow({ //content: contentString }); for (i = 0; i < userCoor.length; i++) { if(userCoor[i][0]== 'PUNCHIN'){// if(i==0){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]), map: map, title: '', icon: new google.maps.MarkerImage('./Image/green-dot.png') }); } else if(userCoor[i][0] == 'PUNCHOUT'){ //if(i == userCoor.length - 1){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]), map: map, title: '', icon: new google.maps.MarkerImage('./Image/red-dot.png') }); } else { var marker = new google.maps.Marker({ position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]), map: map, title: '', icon: new google.maps.MarkerImage('./Image/blue-dot.png') }); } google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { var latlng = new google.maps.LatLng(userCoor[i][1],userCoor[i][2]); var geocoder = geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'latLng': latlng }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { var contentString = ' '; contentString = '<p> Siteid : ' + userCoor[i][0] +' <br />' +' Address : ' + results[1].formatted_address +'</p>'; // contentString = results[1].formatted_address; infowindow.setContent(contentString);//userCoor[i][0] infowindow.open(map, marker); } } }); } })(marker, i)); } animateCircle(line); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line) { var count = 0; window.setInterval(function () { count = (count + 1) % 200; var icons = line.get('icons'); icons[0].offset = (count / 2) + '%'; line.set('icons', icons); }, 200); } } catch(ee) { alert(ee); } </script>"; } catch (Exception) { mapwithanimation = "No details found.."; } Session["sess_x"] = mapwithanimation; }