Get a Quote Widget for Taxi Services in UK

Developer
Ahsan K. Rathore
Size
3,746 Kb
Views
42,504
  1. Get a Quote Widget for Taxi Services in UK Previews
  2. Get a Quote Widget for Taxi Services in UK HTML Codes
  3. Get a Quote Widget for Taxi Services in UK CSS Codes
  4. Get a Quote Widget for Taxi Services in UK JS Codes

How do I make an get a quote widget for taxi services in uk?

Get a Quote Widget for Taxi Services in UK by Using Google Maps API v3. What is a get a quote widget for taxi services in uk? How do you make a get a quote widget for taxi services in uk? This script and codes were developed by Ahsan K. Rathore on 03 July 2022, Sunday.

Get a Quote Widget for Taxi Services in UK Previews
IQ Test

Get a Quote Widget for Taxi Services in UK - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get a Quote Widget for Taxi Services in UK</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div style="color: #333;"> <h2>Get a Quote for Taxi Services</h2> <h4>United Kingdom</h4> <input type="text" placeholder="Pickup" id="Pickup" class='address'> <input type="text" placeholder="Dropoff" id="Dropoff" class='address'> <select id="VehicelType"> <option value="0">Saloon - (4 Seater)</option> <option value="0.22">Estate Car - (4 Seater)</option> <option value="0.39">Executive Car - (4 Seater)</option> <option value="0.35">6 Seater people carrier</option> <option value="0.70">Minibus - (7 Seater)</option> </select> <button id="GetQuote">Get Quote</button> <input type="hidden" id="hdv" value="AIzaSyCI8JhPifPwrqjuspVDH07HoetKDYf2b3U">
</div>
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
</div>
<div style="width:100%;" class="result"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get a Quote Widget for Taxi Services in UK - Script Codes CSS Codes

body { font-family: tahoma; font-size: 14px; }
input[type=text] { width : 300px; font-family: tahoma; font-size: 14px; padding : 5px;
}
select { padding: 6px; }
button{ padding: 6px; }
input[type=text],
select,
button { vertical-align:top; margin-bottom: 10px; }
.error { color: red; }
.loading{display: none;}
.loading span { display: inline-block; vertical-align: middle; width: .6em; height: .6em; margin: .19em; background: #007DB6; border-radius: .6em; animation: loading 1s infinite alternate;
}
/* * Dots Colors * Smarter targeting vs nth-of-type? */
.loading span:nth-of-type(2) { background: #008FB2; animation-delay: 0.2s;
}
.loading span:nth-of-type(3) { background: #009B9E; animation-delay: 0.4s;
}
.loading span:nth-of-type(4) { background: #00A77D; animation-delay: 0.6s;
}
.loading span:nth-of-type(5) { background: #00B247; animation-delay: 0.8s;
}
.loading span:nth-of-type(6) { background: #5AB027; animation-delay: 1.0s;
}
.loading span:nth-of-type(7) { background: #A0B61E; animation-delay: 1.2s;
}
/* * Animation keyframes * Use transition opacity instead of keyframes? */
@keyframes loading { 0% { opacity: 0; } 100% { opacity: 1; }
}

Get a Quote Widget for Taxi Services in UK - Script Codes JS Codes

var a = document.getElementById('Pickup');
var b = document.getElementById('Dropoff');
var options = { types: ['geocode'], // '(cities)' or '(regions)' or 'establishment' componentRestrictions: {country: 'uk'} //Uk only
};
// For Reference Purpose
// https://developers.google.com/maps/documentation/javascript/reference#AutocompletionRequest
var autocomplete1 = new google.maps.places.Autocomplete(a, options);
var autocomplete2 = new google.maps.places.Autocomplete(b, options);
$('#GetQuote').on('click', function(){ var pick = $.trim($('#Pickup').val()), drop = $.trim($('#Dropoff').val());
debugger; if(pick.length > 1 && drop.length > 1) { $('.result').removeClass('error').html('Please wait while we are processing your request.'); $('.loading').fadeIn(500); var pickup = $('#Pickup').val().replace(/ /g,'+'); var dropoff = $('#Dropoff').val().replace(/ /g,'+'); var directionsService = new google.maps.DirectionsService(); var request = { origin : pickup, // a city, full address, landmark etc destination : dropoff, travelMode : google.maps.DirectionsTravelMode.DRIVING, durationInTraffic : true, avoidHighways : false, avoidTolls : false }; directionsService.route(request, function(response, status) { debugger; if ( status == google.maps.DirectionsStatus.OK ) { var distance = parseFloat(response.routes[0].legs[0].distance.value * 0.000621371192).toFixed(2); console.log( distance ); // the distance in metres var duration = response.routes[0].legs[0].duration.text, pricePerMile = 1.5, vehicleTypeValue = $('#VehicelType').val(), appliedVehiclePercentage = ((distance * pricePerMile) * vehicleTypeValue), calculatedPrice = ((distance * pricePerMile) + appliedVehiclePercentage).toFixed(2), quote = "Distance: " + distance + " in miles | Price: <strong>£" + calculatedPrice + "</strong> | Driving Duration: " + duration setTimeout(function(){ $('.result').removeClass('error').html(quote); $('.loading').hide(); },3000) } else { // oops, there's no route between these two locations // every time this happens, a kitten dies // so please, ensure your address is formatted properly } }); //var distanceService = new google.maps.DistanceMatrixService(); /* distanceService.getDistanceMatrix({ origins: [pickup, dropoff], destinations: [pickup, dropoff], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, durationInTraffic: true, avoidHighways: false, avoidTolls: false }, function (response, status) { if (status !== google.maps.DistanceMatrixStatus.OK) { console.log('Error:', status); } else { debugger; var d = parseInt(response.rows[0].elements[0].distance.text.replace(' km','')); //in km d *= 0.62137; //in miles var distance = d.toFixed(1), duration = response.rows[0].elements[0].duration.text, pricePerMile = 1.5, vehicleTypeValue = $('#VehicelType').val(), appliedVehiclePercentage = ((distance * pricePerMile) * vehicleTypeValue), calculatedPrice = ((distance * pricePerMile) + appliedVehiclePercentage).toFixed(2), quote = "Distance: " + distance + " in miles | Price: <strong>£" + calculatedPrice + "</strong> | Driving Duration: " + duration setTimeout(function(){ $('.result').removeClass('error').html(quote); $('.loading').hide(); },3000) } });*/ } else { $('.result').addClass('error').html('Please enter Pickup &amp; Dropoff locations to continue.'); }
});
Get a Quote Widget for Taxi Services in UK - Script Codes
Get a Quote Widget for Taxi Services in UK - Script Codes
Home Page Home
Developer Ahsan K. Rathore
Username ahsanrathore
Uploaded July 03, 2022
Rating 3
Size 3,746 Kb
Views 42,504
Do you need developer help for Get a Quote Widget for Taxi Services in UK?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ahsan K. Rathore (ahsanrathore) Script Codes
Name
Calculator UI
One page responsive website By Ahsan Khurshid
Responsive Layout with Flexbox
Password Strength
Responsive Mega Menu - CSS3
Animated Progress Donut
Shopping Cart - Angular JS
Select Previous Value of Dropdown on Custom Click Button
Google Map Customized InfoWindow Hack
A Pen by Ahsan K. Rathore
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!