Use contents of text field to call Google maps API

1 week ago 12
ARTICLE AD BOX
<!DOCTYPE html> <html> <head> <title>Route Miles Only</title> <script src="https://maps.googleapis.com/maps/api/js?key=MY API GOES HERE"></script> <style> body { font-family: sans-serif; padding: 20px; } input { padding: 8px; width: 300px; font-weight: bold; margin: 5px 0; } button { padding: 8px 16px; margin: 5px 0; cursor: pointer; } .route-input { width: 400px; } </style> </head> <body> <label>Route (e.g., "Nashville, TN to Atlanta, GA"):</label><br> <input type="text" id="route-input" class="route-input" placeholder="Nashville, TN to Atlanta, GA"><br> <button onclick="calculateDistance()">Calculate Distance</button><br><br> <label>Total Route Distance:</label><br> <input type="text" id="distance-field" readonly placeholder="Enter route and click Calculate"> <script> function calculateDistance() { const routeInput = document.getElementById('route-input').value.trim(); const distanceField = document.getElementById('distance-field'); // More robust parsing - handles "City, State to City, State" format // Split on " to " (with spaces), case-insensitive const toMatch = routeInput.match(/^(.+?)\s+to\s+(.+)$/i); if (!toMatch || toMatch.length !== 3) { distanceField.value = "Error: Please use format 'City, State to City, State'"; return; } const origin = toMatch[1].trim(); const destination = toMatch[2].trim(); if (!origin || !destination) { distanceField.value = "Error: Both origin and destination required"; return; } distanceField.value = "Calculating..."; const directionsService = new google.maps.DirectionsService(); const request = { origin: origin, destination: destination, travelMode: 'DRIVING', unitSystem: google.maps.UnitSystem.IMPERIAL }; directionsService.route(request, (result, status) => { if (status === 'OK') { const miles = result.routes[0].legs[0].distance.text; distanceField.value = miles; } else { distanceField.value = "Error: " + status; } }); } // Optional: Calculate on Enter key press document.getElementById('route-input').addEventListener('keypress', function(e) { if (e.key === 'Enter') { calculateDistance(); } }); </script> </body> </html>

Dale K's user avatar

Dale K

28.2k15 gold badges60 silver badges87 bronze badges

Jeffrey's user avatar

New contributor

Jeffrey is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

5 Comments

2026-01-17T23:20:34.947Z+00:00

Thanks for the reply. I get the error Error: Please use format 'City to City' in the box where it should display the miles. When I enter the city without the state it works. The problem is some states have the same city names, so could it work using the same format like "Dallas, TX to Little Rock, AR"

2026-01-17T23:20:53.807Z+00:00

Actually, nevermind. I just deleted your error message and it worked.

2026-01-17T23:29:22.043Z+00:00

try this new version see my updated answer

2026-01-17T23:29:23.747Z+00:00

Why did you remove the explanation? Good answers should always have an explanation.

2026-01-17T23:31:15.11Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Read Entire Article
  3. Use contents of text field to call Google maps API

Related

Trying to add class to a div on scroll but nothing happens

Trying to add class to a div on scroll but nothing happens

KendoReact Data Grid Odata Bearer Token

KendoReact Data Grid Odata Bearer Token

ActiveAdmin “Delete” link redirects to show instead of deleting on Rails 8 (Turbo / importmap / propshaft)

ActiveAdmin “Delete” link redirects to show instead of deleting on Rails 8 (Turbo / importmap / propshaft)

LEFT SIDEBAR AD

Hidden in mobile, Best for skyscrapers.