I am trying to pick up Distance Calculation miles pricing in WordPress but I have not succeeded yet. any help would be appreciated.
Here is my code. but I don’t know what is wrong with my code.
HTML Form
in WordPress where users can input the pickup and destination locations.
function google_maps_distance_calculator_shortcode() {
ob_start();
?>
<div class="distance-calculator-form">
<form id="distance-calculator-form">
<h2>Calculate Distance and Cost</h2>
<label for="pickup">Pickup Location:</label>
<input type="text" id="pickup" name="pickup" placeholder="Enter pickup location"><br>
<label for="destination">Destination Location:</label>
<input type="text" id="destination" name="destination" placeholder="Enter destination location"><br>
<p>Distance: <span id="distance">0 km</span></p>
<p>Total Cost: <span id="total-cost">$0.00</span></p>
<!-- Button to calculate distance and cost -->
<button type="button" id="calculate-button">Calculate Distance & Cost</button>
</form>
</div>
<?php
return ob_get_clean();
}
add_shortcode('google_maps_distance_calculator', 'google_maps_distance_calculator_shortcode');
JavaScript to Calculate Distance Using Google Maps API
document.addEventListener('DOMContentLoaded', function() {
let map;
let directionsService;
let directionsRenderer;
function initMap() {
// Initialize the Google Maps objects
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
directionsRenderer.setMap(map);
}
function calculateDistance() {
const pickup = document.getElementById('pickup').value;
const destination = document.getElementById('destination').value;
if (pickup && destination) {
const request = {
origin: pickup,
destination: destination,
travelMode: 'DRIVING'
};
directionsService.route(request, function(result, status) {
if (status == 'OK') {
directionsRenderer.setDirections(result);
const distance = result.routes[0].legs[0].distance.value / 1000; // distance in km
const cost = distance * 2; // Example: $2 per km
document.getElementById('distance').textContent = distance.toFixed(2) + ' km';
document.getElementById('total-cost').textContent = '$' + cost.toFixed(2);
} else {
alert('Could not calculate distance: ' + status);
}
});
} else {
alert('Please enter both pickup and destination locations.');
}
}
document.getElementById('calculate-button').addEventListener('click', calculateDistance);
// Load the map
initMap();
});
Add Google Maps Script to Your WordPress Site
function enqueue_google_maps_script() {
wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places', null, null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps_script');
Add Styling
.distance-calculator-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
}
.distance-calculator-form label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.distance-calculator-form input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
#calculate-button {
background-color: #007cba;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#calculate-button:hover {
background-color: #005f8d;
}
#distance, #total-cost {
font-weight: bold;
}
