Verwenden Sie den Inhalt des Textfelds, um die Google Maps-API aufzurufen ⇐ JavaScript

[Anonymous]

Ich verwende eine Google Map API und möchte einfach mithilfe eines Textfelds anzeigen, wie viele Meilen es von einer Stadt zur nächsten sind. Der folgende Code funktioniert, aber der Ursprung und das Ziel sind fest in der Funktion codiert. Ich möchte in ein Textfeld „Nashville, TN nach Atlanta, GA“ eingeben und die Entfernung zwischen den beiden anzeigen lassen. Die Städtenamen sind immer unterschiedlich. Vielleicht haben Sie einen einfacheren Code, den ich verwenden kann. Ich möchte nur, dass die Meilen neben meinem Textfeld angezeigt werden, damit ich Google Maps nicht jedes Mal in einem separaten Browser öffnen muss, um zu sehen, wie viele Meilen ein Ort vom Ausgangspunkt bis zum Ziel entfernt ist.

Code: Select all

Route Miles Only


body { font-family: sans-serif; padding: 20px; }
input { padding: 8px; width: 200px; font-weight: bold; }




Total Route Distance:




function initMap() {
const directionsService = new google.maps.DirectionsService();

// Define your Start and End points
const request = {
origin: 'Nashville, TN',
destination: 'atlanta, ga',
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.IMPERIAL // Ensures results are in miles
};

directionsService.route(request, (result, status) => {
if (status === 'OK') {
// Extract the distance string (e.g., "473 mi")
const miles = result.routes[0].legs[0].distance.text;

// Display it in the text field
document.getElementById('distance-field').value = miles;
} else {
document.getElementById('distance-field').value = "Error";
}
});
}

// Initialize the script
window.onload = initMap;