Not in a scanner system. HW5Direction.pdf 1 of 2 COMP163 Global Direction Progra

ID: 3750788 • Letter: N

Question

Not in a scanner system. HW5Direction.pdf 1 of 2 COMP163 Global Direction Program Write a program with a Graphical User Interface (GUI) that will display the direction from Greensboro to atan2( sin(longitude - gboroLong) * cos( latitude), cos(gboroLat) any point on the globe. The direction can be calculated by *sin( latitude) -sin(gboroLat) * cos( latitude) * cos( longitude -gboroLong)) where: longitude latitude gboroLong gboroLat is the longitude of the destination in radians is the latitude of the destination in radians is the longitude of Greensboro in radians is the latitude of Greensboro in radians Positive latitudes are north of the equator, negative latitudes are south. Positive longitudes are east of the zcro meridian and negative longitudes are to the west. Note that atan2 is a method of the Math class that takes two parameters separated by a comma. The program should input the latitude and longitude of the destination as degrees and minutes. You will have to convert to radians using the equation minutes) 60 180 radians - [degrees + 180 Convert the calculated direction in radians to degrees by degrees radians

Explanation / Answer

Hi,

Here i am using a very sophisticated method to draw a route from two different location on a globe. Given the source and destination, you will see a line on googel map from source to destination

Please run the following program in browser. Save below code in html document

<!DOCTYPE html>

<head>
<title>Route</title>
<script src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>

.home-map .g-map {
height: 300px;
}

.home-map .locateus-filter .lf-search {
padding-top: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="home-map">
<div class="container" runat="server" id="idContainer">
<div class="row locateus-filter">
<div class="col-sm-4">
<label class="loc">MY LOCATION</label>
<input name="" type="text" id="startvalue" value="Greensboro, NC, USA" class="form-control-02">
</div>
<div class="col-sm-4">
<label class="dest">DESTINATION</label>
<input name="" type="text" id="endvalue" class="form-control-02">
</div>

<div class="col-sm-12 lf-search">
<input name="" type="button" value="Search >" id="search" class="btn-blue">
</div>
</div>
<div class="row locateus-map">
<asp:Label ID="lblMessage" runat="server" CssClass="errormsg"></asp:Label>
<div class="col-sm-12">
<div id="map_canvas" class="g-map"></div>
</div>
</div>
</div>
</div>
</form>

var geocoder; //for geoLocation
var directionsDisplay;

var directionsService1 = new google.maps.DirectionsService();
var map;
var marker;
var marker1;
var origin = null;
var destination = null;
var source = null;
var dest = null;
var waypoints = [];
var markers = [];
var markers1 = [];
//var markers1 = [];
var arr = [];
var infowindow;
var infowindow1;
var PointsArray = [];
var vertexVal = "";
var noOfCords = "";
var flag = 1;
var flag1 = 1;
var ddlSelected;
var UrlCity;
var UrlRoute;
var finalDestination;
var click = 0;
var prevStartValue = "";
var prevDestValue = "";
var newStartValue = "";
var newDestValue = "";

$(document).ready(function () {
$(".various").fancybox({
maxWidth: 700,
maxHeight: 600,
fitToView: false,
width: '90%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});

//InitializeLocation();
InitializeMap();
//$("#search").focus();
$(document).keydown(function (e) {
if (e.keyCode == 13) {
$("#search").focus();
}
});

$('#startvalue').keydown(function (e) {
//alert('hiii');
click = 0;
});
$('#endvalue').keydown(function (e) {
click = 0;
});

$('#search').on('click', function (e) {

InitializeMap();

}
} else if ((dest != null || dest != "") && (source != null || source != "")) {
if (newStartValue != prevStartValue || prevDestValue != newDestValue) {
if (newStartValue == prevDestValue && newDestValue == prevStartValue) {

}
else {

DrawRoute();
}
}
}
});

});

//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "locality") {
//this is the object you are looking for
city = results[0].address_components[i];
break;
}
}
}
//city data
//alert(city.short_name);
document.getElementById("startvalue").value = city.short_name;
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
}

function InitializeMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
var startlocation = new google.maps.LatLng(36.044659, -79.766235);
var myOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//draggableCursor: "pointer",
center: startlocation
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

var stratinput = /** @type {HTMLInputElement} */(
document.getElementById('startvalue'));
var startautocomplete = new google.maps.places.Autocomplete(stratinput);
var endinput = /** @type {HTMLInputElement} */(
document.getElementById('endvalue'));
var endautocomplete = new google.maps.places.Autocomplete(endinput);
}

/*Find Location for Route*/

function DrawRoute() {
InitializeMap();
finalDestination = "";

origin = document.getElementById('startvalue').value;
destination = document.getElementById('endvalue').value;
if (origin == null) {
origin = document.getElementById('startvalue').value;
addMarker(origin);
} else if (destination == null) {
destination = document.getElementById('endvalue').value;
addMarker(destination);
}
function addMarker(latlng) {
markers.push(new google.maps.Marker({
position: latlng,
map: map,
animation: google.maps.Animation.Animate,
icon: "https://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
}));
}
var mode = google.maps.DirectionsTravelMode.DRIVING;
var request = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: mode,
optimizeWaypoints: true,
avoidHighways: false
};
directionsService1.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var format = "raw";
response.routes[0].bounds.getCenter.lng
PointsArray = response.routes[0].overview_path;
noOfCords = PointsArray.length;
var vertexLatLng = "";
var j = 0;
var tempLatLng = "";

prevStartValue = document.getElementById('startvalue').value.toLowerCase();
prevDestValue = document.getElementById('endvalue').value.toLowerCase();

}
});
}

/*End Of Route Finding code*/

function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}

}
function clearWaypoints() {
markers = [];
marker1 = [];
origin = null;
destination = null;
waypoints = [];
}
function reset() {

clearMarkers();
clearWaypoints();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
}
</script >
</body>
</html>

To run this program you need to have a jquery-1.11.1.min.js in your js folder and a valid google map API key.

Thanks & Regards

Navigate

Not good at these. Please if possible show steps as well as answer so I can unde

Not in functions You are required to open an input file (shown below) then read

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Not in a scanner system. HW5Direction.pdf 1 of 2 COMP163 Global Direction Progra

Question

Explanation / Answer

Related Questions

Navigate