Google maps direction service and markers in jquery with webmethod

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var directionDisplay2;
var directionsService2 = new google.maps.DirectionsService();
var map;
var Default_Latitude = 16.0333; // VN Latitude
var Default_Longitude = 106.8500; // VN Longitude
var waypts = [];
var waypts2 = [];
var originLocation;
var destinationLocation;
var originLocation2;
var destinationLocation2;
var markers = [];
var infowindow = new google.maps.InfoWindow({
});
var infowindows = [];
var imageIconGreen = {
url: '../../images/markergreen.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
var imageIconBlue = {
url: '../../images/markerblue.png',
scaledSize: new google.maps.Size(30, 30),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0),
labelOrigin: new google.maps.Point(15, 10)
};
var imageIconRed = {
url: '../../images/markerred.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
var imageIconGray = {
url: '../../images/markergray.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
var imageIconYellow = {
url: '../../images/markeryellow.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
var imageIconPurple = {
url: '../../images/markerpurple.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
var imageIconOrange = {
url: '../../images/markerorange.png',
scaledSize: new google.maps.Size(30, 30),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0),
labelOrigin: new google.maps.Point(15, 10)
};

$(document).ready(function () {
LoadUserDistDdlList();
LoadddlSalesrep();
LoadddlRoute();
LoadddlCustomer();
LoadDefaultLocation();
});

function LoadUserDistDdlList() {
//$.mobile.loading('show', {});
LoadingPanel.Show();
$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetUserDistributorDdlList",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadUserDistDdlListOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}
});
}

function LoadUserDistDdlListOnSuccess(data) {
var objdata = $.parseJSON(data.d);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').empty();
var listitems = '';
listitems += '' + $('#ctl00_ctl00_MainPane_Content_MainContent_txtSelect').val() + '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {
listitems += '' + objdata.Table1[i][0] + ' - ' + objdata.Table1[i][1] + '';
}
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').append(listitems);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').select2();
//$("#ddlUserType").selectmenu('refresh', true);
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}

function OnChange_ddlDist() {
LoadddlSalesrep();
LoadddlRoute();
LoadddlCustomer();
}

function LoadddlSalesrep() {
LoadingPanel.Show();
var strSelectedFromDstCode;
strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetSalesrepDdlList",
data: "{'strDstCode':'" + strSelectedDstCode + "'}",
//data: "{}",
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadddlSalesrepOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}
});
}

function LoadddlSalesrepOnSuccess(data) {
var objdata = $.parseJSON(data.d);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').empty();
var listitems = '';
listitems += '' + $('#ctl00_ctl00_MainPane_Content_MainContent_txtSelect').val() + '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {
listitems += '' + objdata.Table1[i][1] + ' ' + $('#ctl00_ctl00_MainPane_Content_MainContent_txtTeam').val() + ' :' + objdata.Table1[i][3] + '';
}
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').append(listitems);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').select2();
//$("#ddlUserType").selectmenu('refresh', true);
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}

function OnChange_ddlSalesrep() {

}

function LoadddlRoute() {
LoadingPanel.Show();
var strSelectedFromDstCode;
strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetRouteDdlList",
data: "{'strDstCode':'" + strSelectedDstCode + "'}",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadddlRouteOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}
});
}

function LoadddlRouteOnSuccess(data) {
var objdata = $.parseJSON(data.d);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').empty();
var listitems = '';
listitems += '' + $('#ctl00_ctl00_MainPane_Content_MainContent_txtSelect').val() + '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {
listitems += '' + objdata.Table1[i][1] + '';
}
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').append(listitems);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').select2();
LoadingPanel.Hide();
}

function OnChange_ddlRoute() {

}

function LoadddlCustomer() {
LoadingPanel.Show();
var strSelectedFromDstCode;
strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetCustomerDdlList",
data: "{'strDstCode':'" + strSelectedDstCode + "'}",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadddlCustomerOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}
});
}

function LoadddlCustomerOnSuccess(data) {
var objdata = $.parseJSON(data.d);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').empty();
var listitems = '';
listitems += '' + $('#ctl00_ctl00_MainPane_Content_MainContent_txtSelect').val() + '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {
listitems += '' + objdata.Table1[i][1] + '';
}
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').append(listitems);
$('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').select2();
//$("#ddlUserType").selectmenu('refresh', true);
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}

function OnChange_ddlCustomer() {

}

function LoadDefaultLocation() {
LoadingPanel.Show();

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetDefaultLocation",
//data: "{'strDstCode':'" + strSelectedDstCode + "'}",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadDefaultLocationOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
LoadingPanel.Hide();
}
});
}

function LoadDefaultLocationOnSuccess(data) {
var objdata = $.parseJSON(data.d);
for (var i = 0; i < objdata.Table1.length - 1; i++) {
Default_Latitude = objdata.Table1[i][1];
Default_Longitude = objdata.Table1[i][2];
}
//InitializeMap()
initialize();
LoadingPanel.Hide();
}

function InitializeMap() {
//var Default_Longitude = hfLongitude.Get("hfLongitude")
//var Default_Latitude = hfLatitude.Get("hfLatitude")
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: true
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
if (map) {
var point = new google.maps.LatLng(Default_Latitude, Default_Longitude);
map.setCenter(point, 7);
}
}

function btnSearch_OnClick() {

var strSelectedFromDstCode;
strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();
var strRouteCode;
strRouteCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').val();
var strCustCode;
strCustCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').val();
var strSalesrepCode;
strSalesrepCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').val();

if (strSelectedDstCode == undefined || strSelectedDstCode == '') {
$('#ctl00_ctl00_MainPane_Content_MainContent_pcStdMessage_pnlStdMessage_lblStdMessage').text($('#ctl00_ctl00_MainPane_Content_MainContent_txtSelectadistributor').val()); //'Select a distributor'
pcStdMessage.Show();
} else {
if (strRouteCode == undefined || strRouteCode == '') {
$('#ctl00_ctl00_MainPane_Content_MainContent_pcStdMessage_pnlStdMessage_lblStdMessage').text($('#ctl00_ctl00_MainPane_Content_MainContent_txtSelectaroute').val()); //'Select a route'
pcStdMessage.Show();
} else {
if (strSalesrepCode == undefined || strSalesrepCode == '') {
$('#ctl00_ctl00_MainPane_Content_MainContent_pcStdMessage_pnlStdMessage_lblStdMessage').text($('#ctl00_ctl00_MainPane_Content_MainContent_txtSelectasalesrep').val()); //'Select a salesrep'
pcStdMessage.Show();
} else {
localStorage.setItem('strSelectedDstCode', strSelectedDstCode);
localStorage.setItem('strRouteCode', strRouteCode);
localStorage.setItem('strCustCode', strCustCode);
localStorage.setItem('strSalesrepCode', strSalesrepCode);

initialize();
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";

var summaryPanel = document.getElementById("directions_panel2");
summaryPanel.innerHTML = "";

LoadCustRouteTrackingActual();
LoadCustRouteTrackingPlan();
}
}
}

}

function LoadCustRouteTrackingActual() {
//LoadingPanel.Show();
$('#ctl00_ctl00_MainPane_Content_MainContent_pcStdMessage_pnlStdMessage_lblStdMessage').text($('#ctl00_ctl00_MainPane_Content_MainContent_txtLoading').val()); //'Loading'
pcStdMessage.Show();
//var strSelectedFromDstCode;
//strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();
//var strRouteCode;
//strRouteCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').val();
//var strCustCode;
//strCustCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').val();
//var strSalesrepCode;
//strSalesrepCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').val();

var strSelectedFromDstCode;
strSelectedFromDstCode = localStorage.getItem('strSelectedDstCode');
var strRouteCode;
strRouteCode = localStorage.getItem('strRouteCode');
var strCustCode;
strCustCode = localStorage.getItem('strCustCode');
var strSalesrepCode;
strSalesrepCode = localStorage.getItem('strSalesrepCode');

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetRptCustRouteTrackingActual",
data: "{'strDstCode':'" + strSelectedDstCode + "','strRouteCode':'" + strRouteCode + "','strCustCode':'" + strCustCode + "','strSalesrepCode':'" + strSalesrepCode + "'}",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadCustRouteTrackingActualOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
//LoadingPanel.Hide();
pcStdMessage.Hide();
}
});
}

function LoadCustRouteTrackingActualOnSuccess(data) {
var objdata = $.parseJSON(data.d);
waypts = [];
originLocation = '';
destinationLocation = '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {

if (i == 0) {
originLocation = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
}
else if (i == (objdata.Table1.length - 2)) {
destinationLocation = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
}
else {
var Waypoints = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
waypts.push({
location: Waypoints,
stopover: true
});
}

}
calcRoute(objdata);
//LoadingPanel.Hide();
pcStdMessage.Hide();
}

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true });
directionsDisplay2 = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#FF4500" }, suppressMarkers: true });
var Location = new google.maps.LatLng(Default_Latitude, Default_Longitude);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: Location,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay2.setMap(map);
}

function calcRoute(objdata) {
var request = {
origin: originLocation,
destination: destinationLocation,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var my_route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < objdata.Table1.length - 1; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "" + $('#ctl00_ctl00_MainPane_Content_MainContent_txtRoutesequence').val() + ": " + objdata.Table1[i][0] + "
";
summaryPanel.innerHTML += objdata.Table1[i][1] + " - ";
summaryPanel.innerHTML += objdata.Table1[i][6] + "
";
summaryPanel.innerHTML += objdata.Table1[i][7] + "

";
}
for (var i = 0; i < objdata.Table1.length - 1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]),
icon: imageIconBlue,
//label: "" + (i + 1),
label: {
text: "" + (i + 1),
color: "#ffffff",
fontSize: "16px",
fontWeight: "bold"
},
title: objdata.Table1[i][2] + "|" + objdata.Table1[i][3] + "|" + objdata.Table1[i][1],
description: objdata.Table1[i][1],
map: map
}).addListener('click', function () {
strContent = "";
closeInfos();
strContent = this.title.split("|")[0] + "," + this.title.split("|")[1] + "
";
setContentcallback(this.title.split("|")[0], this.title.split("|")[1], this.title.split("|")[2], function (content) {
infowindow.setContent(strContent);
});
infowindow.open(map, this);
});
}

} else {
//alert("directions response " + status);
}
});
}

function LoadCustRouteTrackingPlan() {
//LoadingPanel.Show();
$('#ctl00_ctl00_MainPane_Content_MainContent_pcStdMessage_pnlStdMessage_lblStdMessage').text($('#ctl00_ctl00_MainPane_Content_MainContent_txtLoading').val()); //'Loading'
pcStdMessage.Show();
//var strSelectedFromDstCode;
//strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();
//var strRouteCode;
//strRouteCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').val();
//var strCustCode;
//strCustCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').val();
//var strSalesrepCode;
//strSalesrepCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').val();

var strSelectedFromDstCode;
strSelectedFromDstCode = localStorage.getItem('strSelectedDstCode');
var strRouteCode;
strRouteCode = localStorage.getItem('strRouteCode');
var strCustCode;
strCustCode = localStorage.getItem('strCustCode');
var strSalesrepCode;
strSalesrepCode = localStorage.getItem('strSalesrepCode');

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetRptCustRouteTrackingPlan",
data: "{'strDstCode':'" + strSelectedDstCode + "','strRouteCode':'" + strRouteCode + "','strCustCode':'" + strCustCode + "','strSalesrepCode':'" + strSalesrepCode + "'}",
async: false,
//data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: LoadCustRouteTrackingPlanOnSuccess,
failure: function (response) {
//$.mobile.loading('hide', {});
//LoadingPanel.Hide();
pcStdMessage.Hide();
}
});
}

function LoadCustRouteTrackingPlanOnSuccess(data) {
var objdata = $.parseJSON(data.d);
waypts2 = [];
originLocation2 = '';
destinationLocation2 = '';
for (var i = 0; i < objdata.Table1.length - 1; i++) {

if (i == 0) {
originLocation2 = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
}
else if (i == (objdata.Table1.length - 2)) {
destinationLocation2 = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
}
else {
var Waypoints = new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]);
waypts2.push({
location: Waypoints,
stopover: true
});
}

}
calcRoute2(objdata);
//LoadingPanel.Hide();
pcStdMessage.Hide();
}

function calcRoute2(objdata) {

var request = {
origin: originLocation2,
destination: destinationLocation2,
//origin: "1521 NW 54th St, Seattle, WA 98107 ",
//destination: "San Diego, CA",
waypoints: waypts2,
//waypoints: [{ location: first, stopover: false },
// { location: second, stopover: false }],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService2.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay2.setDirections(response);
var my_route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel2");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < objdata.Table1.length - 1; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += " " + $('#ctl00_ctl00_MainPane_Content_MainContent_txtRoutesequence').val() + ": " + objdata.Table1[i][0] + "
";
summaryPanel.innerHTML += objdata.Table1[i][1] + " - ";
summaryPanel.innerHTML += objdata.Table1[i][6] + "
";
summaryPanel.innerHTML += objdata.Table1[i][7] + "

";
}
//objdata = objdata;
for (var i = 0; i < objdata.Table1.length - 1; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(objdata.Table1[i][2], objdata.Table1[i][3]),
icon: imageIconOrange,
//label: "" + (i + 1),
label: {
text: "" + (i + 1),
color: "#ffffff",
fontSize: "16px",
fontWeight: "bold"
},
title: objdata.Table1[i][2] + "|" + objdata.Table1[i][3] + "|" + objdata.Table1[i][1],
description: objdata.Table1[i][1],
map: map
}).addListener('click', function () {
strContent = "";
closeInfos();
strContent = this.title.split("|")[0] + "," + this.title.split("|")[1] + "
";
setContentcallback(this.title.split("|")[0], this.title.split("|")[1], this.title.split("|")[2], function (content) {
infowindow.setContent(strContent);
});
infowindow.open(map, this);
});
}

} else {
//alert("directions response " + status);
}
});
}

function closeInfos() {
strContent = "";
infowindow.setContent("");
infowindow.close();
for (var i = 0; i < infowindows.length; i++) {
infowindows[i].close();
}
}

function setContentcallback(lat, long, custcode, callback) {
var response;

var strSelectedFromDstCode;
strSelectedFromDstCode = localStorage.getItem('strSelectedDstCode');
var strRouteCode;
strRouteCode = localStorage.getItem('strRouteCode');
var strCustCode;
strCustCode = localStorage.getItem('strCustCode');
var strSalesrepCode;
strSalesrepCode = localStorage.getItem('strSalesrepCode');

//var strSelectedFromDstCode;
//strSelectedDstCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlDist').val();
//var strRouteCode;
//strRouteCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlRoute').val();
//var strCustCode;
//$('#ctl00_ctl00_MainPane_Content_MainContent_ddlCustomer').val();
//var strSalesrepCode;
//strSalesrepCode = $('#ctl00_ctl00_MainPane_Content_MainContent_ddlSalesrep').val();

strCustCode = custcode;
var strLaltitude;
strLaltitude = lat;
var strLongitude;
strLongitude = long;
strContent = '';

$.ajax({
type: "POST",
url: "CustomerRouteTrack.aspx/GetRptCustRouteTrackingCustInfo",
data: "{'strDstCode':'" + strSelectedDstCode + "','strRouteCode':'" + strRouteCode + "','strCustCode':'" + strCustCode + "','strSalesrepCode':'" + strSalesrepCode + "','strLaltitude':'" + strLaltitude + "','strLongitude':'" + strLongitude + "'}",
contentType: "application/json; charset=utf-8",
success: function (data) {
//var result = eval('(' + response.d + ')');
//if (result) {
// var count = parseFloat(result.length);
// for (var i = 0; i < result.length; i++) {
// strContent = '' + strCustCode + ' : ' + '' + result[i].CUST_CODE + '
';
// strContent += '' + strCustName + ' : ' + '' + result[i].CUST_NAME + '
';
// strContent += '' + strLocation + ' : ' + '' + result[i].LOCATION + '
';
// callback(strContent);
// }
//}
var objdata = $.parseJSON(data.d);
for (var i = 0; i < objdata.Table1.length - 1; i++) {
strContent = objdata.Table1[i][0];
callback(strContent);
}
},
dataType: "json",
failure: ajaxCallFailed
});
//}
callback(strContent);
}

function ajaxCallFailed(error) {
}