<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-md-9 col-sm-9 col-xs-12">
<div class="row">
<h2>Find Distance Between two Addresses using Google API</h2><br>
<div class="container">
<form action="" method="post">
<label>Origin:</label> <input type="text" name="o" placeholder="Enter Origin location" required> <br><br>
<label>Destination:</label> <input type="text" name="d" placeholder="Enter Destination location" required> <br><br>
<input type="submit" value="Calculate distance & time" name="submit"> <br><br>
</form>
<!--Step 1:- Get a google’s API Key from https://developers.google.com/maps/documentation/distance-matrix/get-api-key.
click on GET A KEY button
now click on +create a new project and enter your project name then click on ENABLE API button
then after you are finally prompted to a popup window containing your API KEY.
replace YOUR_API_KEY with your API KEY (Step 1) in below code.-->
<?php
if(isset($_POST['submit'])){
$origin = $_POST['o']; $destination = $_POST['d'];
$api = file_get_contents("https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=".$origin."&destinations=".$destination."&key=YOUR_API_KEY");
$data = json_decode($api);
?>
<label><b>Distance: </b></label> <span><?php echo ((int)$data->rows[0]->elements[0]->distance->value / 1000).' Km'; ?></span> <br><br>
<label><b>Travel Time: </b></label> <span><?php echo $data->rows[0]->elements[0]->duration->text; ?></span>
<?php } ?>
</body>
</html>
</div>
</div>
