479 lines
15 KiB
JavaScript
479 lines
15 KiB
JavaScript
/**
|
|
* To Manage Fleet
|
|
* @module Inventory
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
* This class contains functions related to show device details and their state (Operational/Non-operational/Disabled/Archive/All")
|
|
* @class ShowDealerMap
|
|
* @constructor
|
|
*/
|
|
|
|
|
|
var ccplMap = null,
|
|
geoCoder,
|
|
defaultLat,
|
|
defaultLng,
|
|
marker;
|
|
|
|
var displayDisplay = ""; //route direction display
|
|
//var routeDirectionsService = new google.maps.DirectionsService(); //direction google map api
|
|
|
|
//initialize markers
|
|
var sourceMarker = '../../Scripts/map_api/icons/red_s.png'; //marker for source
|
|
var destinationMarker = '../../Scripts/map_api/icons/red_d.png'; //marker for destination
|
|
|
|
var markers = []; //array of source and destination markers
|
|
|
|
var vLatVal = "";
|
|
var vLongVal = "";
|
|
|
|
var marker1 = ""; var searchBox = null, placeLocationMarkerArray = [];
|
|
var copyResulElsForGeoCoder = [];
|
|
//========================================== map functionality ============================================//
|
|
|
|
|
|
/**
|
|
* This function is used to Get dealer Lat long and set it into Hidden field
|
|
* @method initMap
|
|
* @param {String} id Id Of Map
|
|
* @for ShowDealerMap
|
|
*/
|
|
function initMap(id) {
|
|
var markers = [];
|
|
|
|
ccplMap = new google.maps.Map(document.getElementById(id), {
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
//center: new google.maps.LatLng(vLatVal, vLongVal),
|
|
zoom: 12
|
|
});
|
|
|
|
// Create the search box and link it to the UI element.
|
|
//var input = /** @type {HTMLInputElement} */(
|
|
// document.getElementById('searchLocationTool'));
|
|
//ccplMap.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
|
|
|
|
//searchBox = new google.maps.places.SearchBox(
|
|
// /** @type {HTMLInputElement} */(input));
|
|
|
|
SetDefaultLatAndLong();
|
|
|
|
//setTimeout(function () {
|
|
//placeLocationOnMap();
|
|
//}, 1000);
|
|
|
|
|
|
|
|
// Create the search box and link it to the UI element.
|
|
//var input = /** @type {HTMLInputElement} */(
|
|
// document.getElementById('pac-input'));
|
|
//ccplMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
|
|
//var searchBox = new google.maps.places.SearchBox(
|
|
// /** @type {HTMLInputElement} */(input));
|
|
|
|
// Listen for the event fired when the user selects an item from the
|
|
// pick list. Retrieve the matching places for that item.
|
|
//google.maps.event.addListener(searchBox, 'places_changed', function () {
|
|
// var places = searchBox.getPlaces();
|
|
|
|
// if (places.length == 0) {
|
|
// return;
|
|
// }
|
|
// for (var i = 0, marker; marker = markers[i]; i++) {
|
|
// marker.setMap(null);
|
|
// }
|
|
|
|
// // For each place, get the icon, place name, and location.
|
|
// markers = [];
|
|
// var bounds = new google.maps.LatLngBounds();
|
|
// for (var i = 0, place; place = places[i]; i++) {
|
|
// var image = {
|
|
// url: place.icon,
|
|
// size: new google.maps.Size(71, 71),
|
|
// origin: new google.maps.Point(0, 0),
|
|
// anchor: new google.maps.Point(17, 34),
|
|
// scaledSize: new google.maps.Size(25, 25)
|
|
// };
|
|
|
|
// // Create a marker for each place.
|
|
// var marker = new google.maps.Marker({
|
|
// map: ccplMap,
|
|
// icon: image,
|
|
// title: place.name,
|
|
// position: place.geometry.location,
|
|
// draggable: true,
|
|
// });
|
|
// vLatVal = marker.position.lat();
|
|
// vLongVal = marker.position.lng();
|
|
// markers.push(marker);
|
|
// bounds.extend(place.geometry.location);
|
|
// }
|
|
// console.log(bounds);
|
|
// var ccplMap = new google.maps.Map(document.getElementById(id), {
|
|
// mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
// center: new google.maps.LatLng(vLatVal, vLongVal),
|
|
// zoom: 12
|
|
// });
|
|
// ccplMap.fitBounds(bounds);
|
|
// var ccplMap = new google.maps.Map(document.getElementById(id), {
|
|
// mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
// center: new google.maps.LatLng(vLatVal, vLongVal),
|
|
// zoom: 12
|
|
// });
|
|
// var marker = new google.maps.Marker({
|
|
// position: ccplMap.getCenter(),
|
|
// map: ccplMap,
|
|
// draggable: true,
|
|
// title: 'Click to zoom'
|
|
// });
|
|
// //ccplMap.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
|
|
// google.maps.event.addListener(marker, 'dragend', function (e) {
|
|
// vLatVal = e.latLng.lat();
|
|
// vLongVal = e.latLng.lng();
|
|
// });
|
|
//});
|
|
|
|
|
|
// Bias the SearchBox results towards places that are within the bounds of the
|
|
// current map's viewport.
|
|
//google.maps.event.addListener(ccplMap, 'bounds_changed', function () {
|
|
// var bounds = ccplMap.getBounds();
|
|
// searchBox.setBounds(bounds);
|
|
// console.log(bounds);
|
|
//});
|
|
|
|
}
|
|
|
|
// created google search box by google prediction api
|
|
function onGoogleSearch() {
|
|
// reset search box and sugesstion list div
|
|
$("#sugList-holder").css('visibility', 'hidden');
|
|
$("#sugList").html("");
|
|
|
|
|
|
|
|
// function on search box.
|
|
$("#searchLocationTool").keydown(function (e) {
|
|
|
|
// up key
|
|
if (e.keyCode == 38) {
|
|
var currEle = $('#sugList li.key-highlight');
|
|
$(currEle).removeClass("key-highlight");
|
|
if ($(currEle).index() < 1) {
|
|
$('#sugList li:last').addClass("key-highlight");
|
|
}
|
|
else {
|
|
$(currEle).prev().addClass("key-highlight");
|
|
}
|
|
}
|
|
// down key
|
|
else if (e.keyCode == 40) {
|
|
var currEle = $('#sugList li.key-highlight');
|
|
$(currEle).removeClass("key-highlight");
|
|
if ($(currEle).index() > 3) {
|
|
$('#sugList li:first').addClass("key-highlight");
|
|
}
|
|
else {
|
|
$(currEle).next().addClass("key-highlight");
|
|
}
|
|
}
|
|
// enter key
|
|
else if (e.keyCode == 13) {
|
|
var currEle = $('#sugList li.key-highlight')[0];
|
|
var placeId = $(currEle).attr("placeid");
|
|
var selLoc = $(currEle).attr("location");
|
|
drawMarker(placeId, selLoc);
|
|
$("#sugList").html("");
|
|
}
|
|
|
|
else {
|
|
var displaySuggestions = function (predictions, status) {
|
|
if (status != google.maps.places.PlacesServiceStatus.OK) {
|
|
console.log(status);
|
|
return;
|
|
}
|
|
predictions.forEach(function (prediction) {
|
|
var loc = prediction.description.split(' ').join('_');
|
|
|
|
var str = '<li class="list-item" location=' + loc + ' placeid=' + prediction.place_id + ' onclick= drawMarker("' + prediction.place_id + '","' + loc + '")> <i></i> ' + prediction.description + '</li>';
|
|
$('#sugList').append(str);
|
|
//console.log($('#sugList'));
|
|
});
|
|
|
|
$("#sugList").css('visibility', 'visible');
|
|
$("#sugList li:first").addClass("key-highlight");
|
|
};
|
|
|
|
|
|
|
|
var stxt = $("#searchLocationTool").val();
|
|
//console.log(stxt);
|
|
if (stxt.length <= 1) {
|
|
|
|
//$("#sugList-holder").css('visibility', 'hidden');
|
|
$("#sugList").html("");
|
|
}
|
|
|
|
if (stxt.length > 1) {
|
|
if (stxt.length % 2 == 0) {
|
|
$("#sugList").html("");
|
|
var service = new google.maps.places.AutocompleteService();
|
|
service.getQueryPredictions({ input: stxt }, displaySuggestions);
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
|
|
// place the marker by suggestion.
|
|
function drawMarker(placeId, selectedLoc) {
|
|
$("#searchLocationTool").val(selectedLoc.split('_').join(' '));
|
|
|
|
//infoWindow = new google.maps.InfoWindow();
|
|
var service = new google.maps.places.PlacesService(ccplMap);
|
|
service.getDetails({
|
|
placeId: placeId,
|
|
fields: ["name", "address_component", "formatted_address", "geometry.location"]
|
|
}, function (result, status) {
|
|
if (status != google.maps.places.PlacesServiceStatus.OK) {
|
|
alert(status);
|
|
return;
|
|
}
|
|
|
|
//remove breakdown location marker
|
|
if (marker) {
|
|
marker.setMap(null);
|
|
marker = "";
|
|
}
|
|
|
|
// Address cration
|
|
//console.log(result);
|
|
|
|
|
|
var bounds = new google.maps.LatLngBounds();
|
|
// Create a marker for each place.
|
|
var markerLocation = new google.maps.Marker({
|
|
map: ccplMap,
|
|
place: {
|
|
placeId: placeId,
|
|
location: result.geometry.location
|
|
},
|
|
//draggable: true,
|
|
title: result.formatted_address,
|
|
// position: places[0].geometry.location
|
|
});
|
|
|
|
//google.maps.event.addListener(markerLocation, 'dragend', function (e) {
|
|
// vLatVal = e.latLng.lat();
|
|
// vLongVal = e.latLng.lng();
|
|
//});
|
|
//breakdownLocationLatLng = markerLocation.place.location;
|
|
|
|
//placeLocationMarkerArray.push(markerLocation);
|
|
bounds.extend(result.geometry.location);
|
|
|
|
ccplMap.fitBounds(bounds);
|
|
|
|
$("#sugList").html("").css('visibility', 'hidden');
|
|
console.log(result.geometry.location)
|
|
|
|
vLatVal = result.geometry.location.lat();
|
|
vLongVal = result.geometry.location.lng();
|
|
console.log(vLatVal)
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* This function is used to Get dealer Lat long and set it into Hidden field
|
|
* @method getDelearLatLong
|
|
* @for ShowDealerMap
|
|
*/
|
|
function getDelearLatLong() {
|
|
console.log("getDelearLatLong",vLatVal)
|
|
$("#hdnDealerDefaultLatitude").val(vLatVal);
|
|
$("#hdnDealerDefaultLongitude").val(vLongVal);
|
|
closeWindow("#divShowDealerLocation");
|
|
}
|
|
|
|
//==================================== end map functionality =============================================//
|
|
$(document).ready(function () {
|
|
setTimeout(function () {
|
|
initMap("divMapContainer");
|
|
|
|
}, 1000);
|
|
|
|
onGoogleSearch();
|
|
});
|
|
|
|
/**
|
|
* This function set marker object and Add Dragend Event in Maps
|
|
* @method getSetMarker
|
|
* @for ShowDealerMap
|
|
*/
|
|
function SetDefaultLatAndLong() {
|
|
var DealerState = $("#ddState option:selected").text();
|
|
var DealerCity = $("#ddCity option:selected").val();
|
|
var address = DealerState + "," + DealerCity;
|
|
console.log("VVVV", $("#hdnDealerDefaultLongitude").val());
|
|
if ($("#hdnDealerDefaultLatitude").val() == "" || $("#hdnDealerDefaultLatitude").val() == "0") {
|
|
|
|
setMapCenterToAddress(address);
|
|
}
|
|
else {
|
|
vLatVal = $("#hdnDealerDefaultLatitude").val();
|
|
vLongVal = $("#hdnDealerDefaultLongitude").val();
|
|
var dealerLatLong = new google.maps.LatLng(vLatVal, vLongVal);
|
|
ccplMap.setCenter(dealerLatLong);
|
|
getSetMarker();
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* This function set center and zoom of map when state or city change
|
|
* @method setMapCenterToAddress
|
|
* @param {String} address address to show on map
|
|
* @for ShowDealerMap
|
|
*/
|
|
function setMapCenterToAddress(address) {
|
|
//geoCoder = new google.maps.Geocoder();
|
|
//geoCoder.geocode({ 'address': address }, function (results, status) {
|
|
// if (status == google.maps.GeocoderStatus.OK) {
|
|
// ccplMap.setCenter(results[0].geometry.location);
|
|
// defaultLat = results[0].geometry.location.lat();
|
|
// defaultLng = results[0].geometry.location.lng();
|
|
// vLatVal = defaultLat;
|
|
// vLongVal = defaultLng;
|
|
// $("#hdnDealerDefaultLatitude").val(vLatVal);
|
|
// $("#hdnDealerDefaultLongitude").val(vLongVal);
|
|
// getSetMarker();
|
|
// }
|
|
//});
|
|
|
|
callHereAPIForGeoCoder(address);
|
|
|
|
if (copyResulElsForGeoCoder[0].status == "OK") {
|
|
ccplMap.setCenter(copyResulElsForGeoCoder[0].displayPosition);
|
|
defaultLat = copyResulElsForGeoCoder[0].displayPosition.Latitude;
|
|
defaultLng = copyResulElsForGeoCoder[0].displayPosition.Longitude;
|
|
vLatVal = defaultLat;
|
|
vLongVal = defaultLng;
|
|
$("#hdnDealerDefaultLatitude").val(vLatVal);
|
|
$("#hdnDealerDefaultLongitude").val(vLongVal);
|
|
getSetMarker();
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* This function set marker object and Add Dragend Event in Maps
|
|
* @method getSetMarker
|
|
* @for ShowDealerMap
|
|
*/
|
|
function getSetMarker() {
|
|
|
|
//remove breakdown location marker
|
|
if (marker) {
|
|
marker.setMap(null);
|
|
marker = "";
|
|
}
|
|
|
|
marker = new google.maps.Marker({
|
|
position: ccplMap.getCenter(),
|
|
map: ccplMap,
|
|
draggable: true,
|
|
title: 'Click to zoom'
|
|
});
|
|
google.maps.event.addListener(marker, 'dragend', function (e) {
|
|
vLatVal = e.latLng.lat();
|
|
vLongVal = e.latLng.lng();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* This function get location from given lattitude and longitude
|
|
* @method getLocationByLatLng
|
|
* @for ShowDealerMap
|
|
*/
|
|
function getLocationByLatLng() {
|
|
|
|
var lattitude = $("#textLat").val();
|
|
var longitude = $("#textLng").val();
|
|
|
|
ccplMap.setCenter(new google.maps.LatLng(lattitude, longitude));
|
|
getSetMarker();
|
|
|
|
vLatVal = lattitude;
|
|
vLongVal = longitude;
|
|
}
|
|
|
|
/**
|
|
* This function show hide search by lat lng div on radio button click
|
|
* @method onRadioButtonCheckChange
|
|
* @for ShowDealerMap
|
|
*/
|
|
function onRadioButtonCheckChange($this) {
|
|
var inputId = $this;
|
|
if (inputId == "radio_latLng") {
|
|
$("#div_searchByLatLng").show();
|
|
$("#searchLocationTool").hide();
|
|
$("#sugList").html("");
|
|
$("#searchLocationTool").val("");
|
|
} else if (inputId == "radio_Address") {
|
|
$("#div_searchByLatLng").hide();
|
|
$("#searchLocationTool").show();
|
|
$("#sugList-holder").css('visibility', 'visible');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
//------------------- implementing HERE API For Geocoder ------------------------------
|
|
|
|
function callHereAPIForGeoCoder(details) {
|
|
|
|
console.log(data);
|
|
var resultElsForGeoCoder = [];
|
|
var searchtext = details;
|
|
var url = "https://geocoder.ls.hereapi.com/6.2/geocode.json?";
|
|
url += "&apiKey=DW3-YCFFZtJzlAQpTfVPoXADcZpEeZe3t8h6ganVsqo";
|
|
url += "&searchtext=" + searchtext;
|
|
|
|
|
|
var request = GetDataHerefromAPI("get", url);
|
|
if (request) {
|
|
request.onload = function (data) {
|
|
var res = JSON.parse(data.target.response);
|
|
//var response = (res.response.route[0].summary);
|
|
resultElsForGeoCoder.distance = (res.Response.View[0].Result[0].Location.MapView);
|
|
resultElsForGeoCoder.displayPosition = res.Response.View[0].Result[0].Location.DisplayPosition;
|
|
resultElsForGeoCoder.status = "OK";
|
|
|
|
copyResulElsForGeoCoder.push(resultElsForGeoCoder);
|
|
}
|
|
request.send();
|
|
}
|
|
}
|
|
|
|
function GetDataHerefromAPI(method, url) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.withCredentials = false;
|
|
if ("withCredentials" in xhr) {
|
|
xhr.open(method, url, false);
|
|
} else if (typeof XDomainRequest != "undefined") {
|
|
xhr = new XDomainRequest();
|
|
xhr.open(method, url);
|
|
} else {
|
|
xhr = null;
|
|
}
|
|
return xhr;
|
|
} |