# how to create auto multiply calc? [Answered]RSS

## 2 replies

Last post Sep 05, 2017 06:19 AM by Billy Liu

• Weli1989

Member

3 Points

5 Posts

### how to create auto multiply calc?

Sep 05, 2017 02:17 AM|Weli1989|LINK

Hello everyone, I have a code from a map of google maps with origin and destination to choose and the person puts two more waypoints, so it returns the distances of routes, route 1, route 2 and route 3, but I need to calculate the total value of the 3 routes and print on the screen this value, then automatically multiply the result by \$ 0.75 and also by \$ 1.50 and print on the screen saying the total value, for example if the total distance of the 3 routes are 300Km, then would be 300Km X \$ 1.50 = \$ 450.00 and so to \$ 0.75 also, can anyone help me? Thank u very much! The code below is

```<!DOCTYPE html>
<html>
<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;
}

#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;
}

#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;
}

#directions-panel {
margin-top: 10px;
background-color: #FFEE77;
}
</style>
<body>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
<option value="Halifax, NS">Halifax, NS</option>
<option value="Boston, MA">Boston, MA</option>
<option value="New York, NY">New York, NY</option>
<option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b>
<br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i>
<br>
<input id="Text1" type="text" value="chicago, il"" />
<input id="Text2" type="text" value="spokane, wa" />

<%--  <select multiple id="waypoints">
<option value="montreal, quebec">Montreal, QBC</option>
<option value="toronto, ont">Toronto, ONT</option>
<option value="chicago, il">Chicago</option>
<option value="winnipeg, mb">Winnipeg</option>
<option value="fargo, nd">Fargo</option>
<option value="calgary, ab">Calgary</option>
<option value="spokane, wa">Spokane</option>
</select>--%>
<br>
<b>End:</b>
<select id="end">
<option value="Vancouver, BC">Vancouver, BC</option>
<option value="Seattle, WA">Seattle, WA</option>
<option value="San Francisco, CA">San Francisco, CA</option>
<option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: { lat: 41.85, lng: -87.65 }
});
directionsDisplay.setMap(map);

document.getElementById('submit').addEventListener('click', function () {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var textbox1 = document.getElementById('Text1');
var textbox2 = document.getElementById('Text2');

if (textbox1.value != "") {
waypts.push({
location: textbox1.value,
stopover: true
});
}
if (textbox2.value != "") {
waypts.push({
location: textbox2.value,
stopover: true
});
}

//var checkboxArray = document.getElementById('waypoints');
//for (var i = 0; i < checkboxArray.length; i++) {
//    if (checkboxArray.options[i].selected) {
//        waypts.push({
//            location: checkboxArray[i].value,
//            stopover: true
//        });
//    }
//}

directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
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
</script>
</body>
</html>```

• jaysentang

None

0 Points

1 Post

### Re: how to create auto multiply calc?

Sep 05, 2017 05:36 AM|jaysentang|LINK

Create a new function inside the <script> tag

Example:

function RouteCalculation(distance){

var price1 = 1.5;

var price2 = 0.75;

var result1 = distance * price1;

var result2 = distance * price2;

//now you can print both result here

}

you can call the function in any function  by writing RouteCalculation(300);

• Billy Liu

Contributor

2230 Points

815 Posts

### Re: how to create auto multiply calc?

Sep 05, 2017 06:19 AM|Billy Liu|LINK

Hi Weli1989,

```            directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function (response, status) {
var distance = 0;
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>';
distance += route.legs[i].distance.value;
}
//300Km X \$ 1.50 = \$ 450.00
summaryPanel.innerHTML += distance / 1000 + 'Km X \$ 1.50 = \$ ' + distance / 1000 * 1.5 + '<br>';
summaryPanel.innerHTML += distance / 1000 + 'Km X \$ 0.75 = \$ ' + distance / 1000 * 0.75 + '<br>';
} else {
window.alert('Directions request failed due to ' + status);
}
});```

Best Regards,

Billy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.