JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
    <title>Distance Matrix service</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=bg&region=BG"></script>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map-canvas {
        height: 400px;
	width: 700px;
      }

    </style>
    <script>
var map;
var geocoder;
var markersArray = [];

var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';

var originSet = false;
var destinationSet = false;

function preCalculate(){

	deleteOverlays();

	addMarker(document.getElementById('routeOrigin').value, false);
	addMarker(document.getElementById('routeDestination').value, true);
	setTimeout(calculateDistancesRequest, 500);
	
}

function initialize() {
  var opts = {
    center: new google.maps.LatLng(42.8, 25.2),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
  geocoder = new google.maps.Geocoder();

}

function calculateDistancesRequest() {
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
    {
      origins: [origin],
      destinations: [destination],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, calculateDistancesResponse);
}

function calculateDistancesResponse(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {

	var price = (
				response.rows[0].elements[0].distance.value/1000/100 * 
				parseFloat(document.getElementById('fuelRate').value) * 
				parseFloat(document.getElementById('fuelPrice').value)
	).toFixed(2);

    alert("Разстоянието от...