first of all i am a beginner in programming. My question is why doesn't my web application start on submit.
I am using Google JavaScript API for calculating optimal route and i have been developing this web app in NetBeans with Laravel 5.
The goal of this application is to get locations from DB and display that locations on Google map and also to display the optimal driving route.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Waypoints in directions</title>
<style>
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
height: 400px;
float: left;
text-align: left;
padding-top: 0;
}
#directions-panel {
margin-top: 10px;
background-color: #FFEE77;
padding: 10px;
overflow: scroll;
height: 174px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<?php
//$lokacije = locations, nar = is a table in db, Adresa = is a row (adress)
$lokacije = DB::table('nar')->pluck('Adresa');
echo json_encode($lokacije);
?>
<script>
var start = "Dolac 8, Rijeka";
var end = "Dolac 15, Rijeka";
var lokacije = <?php echo json_encode($lokacije) ?>;
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 45.328568, lng: 14.440477}
});
directionsDisplay.setMap(map);
document.getElementById('submit').onsubmit( function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = lokacije;
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}
directionsService.route({
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById('directions-panel');
summaryPanel.innerHTML = '';
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="http://ift.tt/2r5BfaE">
</script>
</body>
</html>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire