<div id="mapCalculator">

<b>Start:</b>

<select id="start" onchange="calcRoute();">
<option value="24.126208, -97.741941">Ojeda Processing Plant</option>
<option value="25.685376, -94.909758">Arana Spar</option>
<option value="22.277888, -94.787785">Quiroga Rig</option>
<option value="23.272791, -92.991155">Orizba Rig</option>
</select>

<b>End:</b>
<select id="end" onchange="calcRoute();">
<option value="24.126208, -97.741941">Ojeda Processing Plant</option>
<option value="25.685376, -94.909758">Arana Spar</option>
<option value="22.277888, -94.787785">Quiroga Rig</option>
<option value="23.272791, -92.991155">Orizba Rig</option>
</select>
</div>
<b>Distance 1:
<span id="calcDistanceOutput"></span>
</b>

<br>    <select id = "end1" onchange="calcRoute1();">
    <option value="51.509865, -0.118092">London</option>
<option value="48.864716, 2.349014">Paris</option>
<option value="40.416775, -3.703790">Madrid</option>
    </select>
    <br>    <select id = "end2" onchange="calcRoute2();">
    <option value="51.509865, -0.118092">London</option>
<option value="48.864716, 2.349014">Paris</option>
<option value="40.416775, -3.703790">Madrid</option>
    </select>
    <br>Distance 2:
    <span id = "calcDistanceOutput1"></span>
    <br><b>Sum of Distance: </b>
    <span id = "calculate"></span>

<!--____________________________________________________-->
<div id="map" style="width: 780px; height: 605px" style="border:1px solid #444" style="margin: 10px 10px"></div>
<script>
var map;
function initMap(){
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 22.778125, lng: -96.003560},
zoom: 6,
anchor: new google.maps.Point(18, 18)
});

OjedaProcessingPlant(map);
AranaSpar(map);
QuirogaRig(map);
OrizbaRig(map);
}

function
OjedaProcessingPlant(map) {
var OjedaProcessingPlantimage = 'images/iconPlant.png';
var OjedaProcessingPlantmarker = new google.maps.Marker({
position: {lat: 24.126208,lng: -97.741941},
map: map,
icon: OjedaProcessingPlantimage,
anchor: new google.maps.Point(18, 18)
});
var InfoWindow = new google.maps.InfoWindow({
content: '<class="InfoWin">'+'<h5>Ojeda Processing Plant</h5>'+ '<p>24.126208º Latitude<br>-97.741941º Longitude</p>'+'<a href="#Ojeda">More Info</a>'
});
OjedaProcessingPlantmarker.addListener('click',function(){
InfoWindow.open(map,OjedaProcessingPlantmarker)
});
}

function AranaSpar(map) {
var AranaSpartimage = 'images/iconSpar.png';
var AranaSparmarker = new google.maps.Marker({
position: {lat: 25.685376,lng: -94.909758},
map: map,
icon: AranaSpartimage,
anchor: new google.maps.Point(18, 18)
});
var InfoWindow = new google.maps.InfoWindow({
content: '<class="InfoWin">'+'<h5>Arana Spar</h5>'+ '<p>25.685376º Latitude<br>-94.909758º Longitude</p>'+'<a href="#Arana">More Info</a>'
});
AranaSparmarker.addListener('click',function(){
InfoWindow.open(map,AranaSparmarker)
});
}
function QuirogaRig(map) {
var QuirogaRigimage = 'images/iconRig.png';
var QuirogaRigmarker = new google.maps.Marker({
position: {lat: 22.277888,lng: -94.787785},
map: map,
icon: QuirogaRigimage,
anchor: new google.maps.Point(18, 18)
});
var InfoWindow = new google.maps.InfoWindow({
content: '<class="InfoWin">'+'<h5>Quiroga Rig</h5>'+ '<p>22.277888º Latitude<br>-94.787785º Longitude</p>'+'<a href="#Quiroga">More Info</a>'
});
QuirogaRigmarker.addListener('click',function(){
InfoWindow.open(map,QuirogaRigmarker)
});
}
function OrizbaRig(map) {
var OrizbaRigimage = 'images/iconRig.png';
var OrizbaRigmarker = new google.maps.Marker({
position: {lat: 23.272791,lng: -92.991155},
map: map,
icon: OrizbaRigimage,
anchor: new google.maps.Point(18, 18)
});
var InfoWindow = new google.maps.InfoWindow({
content: '<class="InfoWin">'+'<h5>Orizba Rig</h5>' + '<p>23.272791º Latitude<br>-92.991155º Longitude</p>'+'<a href="#Orizba">More Info</a>'
});
OrizbaRigmarker.addListener('click',function(){
InfoWindow.open(map,OrizbaRigmarker)
});
}
//________________________________________________________
function calcRoute() {
var start = document.getElementById('start').value;
var startComma = start.indexOf(',');
var startLat = parseFloat(start.substring(0, startComma));
var startLong = parseFloat(start.substring(startComma + 1, start.length));
var startPoint = new google.maps.LatLng(startLat, startLong);

var end = document.getElementById('end1').value;
var endComma = end.indexOf(',');
var endLat = parseFloat(end.substring(0, endComma));
var endLong = parseFloat(end.substring(endComma + 1, end.length));
var endPoint = new google.maps.LatLng(endLat, endLong);

//polyline
var flightPlanCoordinates = [startPoint, endPoint];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#ef3e36',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

//calculates distance between two points in km's
function calcDistance(){

return Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
}
document.getElementById("calcDistanceOutput").innerHTML = (calcDistance()) + ' km';
    function calcDistance1(){
return Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
}
}

   function calcRoute1() {
var start = document.getElementById('end').value;
var startComma = start.indexOf(',');
var startLat = parseFloat(start.substring(0, startComma));
var startLong = parseFloat(start.substring(startComma + 1, start.length));
var startPoint = new google.maps.LatLng(startLat, startLong);

var end = document.getElementById('end1').value;
var endComma = end.indexOf(',');
var endLat = parseFloat(end.substring(0, endComma));
var endLong = parseFloat(end.substring(endComma + 1, end.length));
var endPoint = new google.maps.LatLng(endLat, endLong);

//polyline
var flightPlanCoordinates = [startPoint, endPoint];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#ef3e36',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

//calculates distance between two points in km's
function calcDistance(){
return Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
}
document.getElementById("calcDistanceOutput1").innerHTML = (calcDistance()) + ' km';
    function calcDistance1(){
return Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
}
     function calcDistance2(){
         var x = Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
         var y = Math.round(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint) / 1000);
return x + y;
}
  document.getElementById("calculate").innerHTML = (calcDistance2()) + ' km';



}





google.maps.event.addDomListener(window, 'load', initMap);
//________________________________________________________