"Distance Finder"
Bootstrap 4.1.1 Snippet by divyalahad

<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>

Related: See More


Questions / Comments: