It shows me this error. Cannot read property 'entries' of undefined.
please solve it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Service provider -page</title>
<style>
body, fieldset, input, button, table {background:white;color:black;font-family:sans;}
#map {width:30rem;height:30rem;}
th,td {padding:0.25rem;}
form, #map, table {margin:0.5rem;}
</style>
</head>
<body>
<form id="form" method="post">
<fieldset>
<label for="trip_start">Start location</label>
<input id="trip_start" name="trip_start" type="text" placeholder="" required><br/>
<label for="trip_end">Destination</label>
<input id="trip_end" name="trip_end" type="text" placeholder="" required><br/>
<button>Send</button>
</fieldset>
</form>
<div id="map"></div>
<table id="routetable">
<thead><th>Route</th><th>Description</th><th>Passengers</th></thead>
</table>
<script type="text/javascript" >
// THIS MARGIN DECIDES HOW CLOSE FROM A ROUTE ORIG/DEST-POINT NEEDS TO BE TO BE COUNTED IN. IN METERS.
// CHANGE TO WHAT SUITS YOU BEST!!
var margin = 500;
// Set options for Autocomplete search input (optional)
var options = {
fields: ["place_id"] // We only need place_id this time
// bounds: bangladeshBounds, <- would show results only from Bangladesh
// types: ['address'] <- would show only addresses
// For more options in see Google Maps API docs
};
// Set options for Directions request
var directionRequest = {
origin: {placeId:''},
destination: {placeId:''},
provideRouteAlternatives: true,
travelMode: 'DRIVING',
// avoidFerries: true,
// avoidTolls: true
// For more options in see Google Maps API docs
};
// Set Polyline style for Directions request
var directionsRendererPolylineOptions = {
strokeColor: 'blue',
strokeWeight: 4,
strokeOpacity: 0.4
}
// Default map view
var mapOptions = {
zoom: 7,
center: {lat: 23.906, lng: 90.324}
};
// Global variables
var directionsService, passengerData;
var directionsRenderers = [];
// This is run after Google Maps library is done loading
function init(){
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var input_start = new google.maps.places.Autocomplete(document.getElementById('trip_start'), options);
var input_end = new google.maps.places.Autocomplete(document.getElementById('trip_end'), options);
directionsService = new google.maps.DirectionsService;
getPassengers();
// When submit is clicked
document.getElementById('form').onsubmit = function() {
directionRequest.origin.placeId = input_start.getPlace().place_id;
directionRequest.destination.placeId = input_end.getPlace().place_id;
directionsService.route(directionRequest, function(result, status) {
if (status == 'OK') {
for(i in directionsRenderers){
directionsRenderers[i].setMap();
}
for(i in result.routes){
var dROptions = {map: map, directions: result, routeIndex:parseInt(i), polylineOptions: new google.maps.Polyline(directionsRendererPolylineOptions)}
if(directionsRenderers[i]){
directionsRenderers[i].setOptions(dROptions)
}
else{
directionsRenderers[i] = new google.maps.DirectionsRenderer(dROptions)
}
}
routeHandler(result.routes)
}
});
return false;
}
}
// Handles routes from directionResults:
// 1) Creates polylines
// 2) Checks which passengers are close to routelines
// 3) Creates routetable to HTML
function routeHandler(routeArr){
var routes = createPolylines(routeArr)
// Add passenger data to routes
for(r of routes){
r.passengers = findPassengers(r,passengerData)
}
renderRouteTable(routes)
}
// Google Maps doesn't provide full polyline set for the route. Need to compile it manually
function createPolylines(routeArr){
var polylines = [];
for(r of routeArr){
var polyline = new google.maps.Polyline({path: []});
var legs = r.legs;
for (i=0;i<legs.length;i++) {
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
}
}
}
polylines.push({'bounds':r.bounds, 'polyline': polyline, 'googleObject':r})
}
return polylines
}
// 1) Creates circle around orig/dest points
// 2) Checks if any routepoint is within those circles
function findPassengers(route,passengers){
var passengersInRoute = [];
for(p of passengers){
var o = new google.maps.Circle({center: p.orig, radius: margin});
var d = new google.maps.Circle({center: p.dest, radius: margin});
if(r.bounds.intersects(o.getBounds()) && r.bounds.intersects(d.getBounds())){
var originInLine = false;
var destinInLine = false;
for(const [i,pp] of r.polyline.getPath().j.entries()){
if(o.getBounds().contains(pp)) originInLine = i;
if(d.getBounds().contains(pp)) destinInLine = i;
}
if(originInLine && destinInLine && (originInLine < destinInLine)) passengersInRoute.push(p)
}
}
return passengersInRoute;
}
// Just for rendering data to HTML-table
function renderRouteTable(routes){
var table = document.getElementById('routetable');
for(var i = 1; i < table.rows.length;){
table.deleteRow(i);
}
for(const [i,r] of routes.entries()){
var tr = table.insertRow();
var td = tr.insertCell();
td.innerText = "Route "+i;
td = tr.insertCell();
roadlist = '';
for(const[j,l] of r.googleObject.legs.entries()){
for(const[k,s] of l.steps.entries()){
if(j==0 && k==0) roadlist = s.instructions
roadlist += '</br>'+s.instructions
}
}
td.innerHTML = roadlist
td = tr.insertCell();
td.innerText = r.passengers.length
}
}
// This is for getting the passenger data from our backend
function getPassengers(){
var formData = new FormData();
formData.append('getPassengers', 1);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
msg = JSON.parse(xhr.responseText);
if(msg.error) {
// If errors
}
else if(msg.success && msg.results){
// If no errors
passengerData = [];
for(p of msg.results){
passengerData.push({
id:p.id,
orig:{lat:parseFloat(p.slat), lng:parseFloat(p.slng)},
dest:{lat:parseFloat(p.elat), lng:parseFloat(p.elng)}
})
}
// OPTIONAL IF YOU WANT TO DISPLAY PASSENGERS ON MAP
if(1==1){
var bounds = new google.maps.LatLngBounds();
for(p of passengerData){
p.omarker = new google.maps.Marker({position: p.orig,map: map});
p.dmarker = new google.maps.Marker({position: p.dest,map: map});
p.ocircle = new google.maps.Circle({center: p.orig,radius:margin,map: map,
strokeWeight: 0, fillColor: 'blue', fillOpacity: 0.35});
p.dcircle = new google.maps.Circle({center: p.dest,radius:margin,map: map,
strokeWeight: 0, fillColor: 'red', fillOpacity: 0.35});
bounds.extend(p.orig);
bounds.extend(p.dest);
}
if(passengerData.length) map.fitBounds(bounds);
}
}
}
}
xhr.open('POST', 'backend.php', true);
xhr.send(formData);
return;
}
</script>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBaSLGm97AxGclf4amcXsbi6oPMU0nQ_XE&libraries=places&callback=init"></script>
</body>
</html>
