🔺 Improvements & ⚠️ API Quota Update On Readme
⚠️ Attention: API Pricing & Quotas
💡 Google Maps Platform uses a "Pay-as-you-go" pricing model. While they offer generous monthly free tiers, exceeding these limits will incur charges on your Google Cloud account.
To use all features of this card (including the Route Calculator), you need to enable specific APIs in your Google Cloud project (API List). Here is a simplified breakdown of the free monthly quotas (as of March 2025) for the APIs used by this card:
| Feature | Required API | Free Monthly Limit | Overage Cost |
|---|---|---|---|
| Core Map Rendering | Maps JavaScript API (Dynamic Maps) | 10,000 map loads | ~$7.00 per 1,000 loads |
| Route Calculation | Directions API | 10,000 requests | ~$5.00 per 1,000 requests |
| Address Autocomplete | Places API (New) | 10,000 requests | ~$10.00 per 1,000 requests |
| Live Traffic Routes | Routes API | 5,000 - 10,000 requests | Varies by feature |
(Note: Only the Maps Embed API and native Mobile SDKs are strictly free and unlimited. This Lovelace card uses the Maps JavaScript API, which is billable after your 10,000 free loads).
❓ Why does my Quotas page say "Unlimited"?
If you check your Google Cloud Quotas page, you might see "Unlimited" next to Map loads per day. This does NOT mean it is free. The "Unlimited" label refers to the technical rate limit (meaning Google won't block your map from loading if you get massive traffic), but they will still bill you once you exceed the 10,000 monthly free tier.
To protect yourself from unexpected charges, you must manually lower this "Unlimited" value to a safe daily limit (e.g., 150) by clicking the edit/pencil icon next to it.
You are solely responsible for your API settings, quotas, and any charges incurred. It is highly recommended to:
- Go to APIs & Services → Quotas and manually lower the "Unlimited" daily request limits per API. (e.g., 150)
- Go to Billing → Budgets & Alerts and create a budget alert (e.g., $2/month).
- Restrict your API key to only the APIs you actually use.
Route Search & Travel Panel — Release Notes
🔧 Panel Layout Simplified
The route panel can now be placed only above or below the map. Left/right side panel options have been removed, and the manual height setting is no longer needed — the panel sizes itself automatically.
🗺️ Map-Based Route Info Bar
Route results are no longer shown as a list inside the panel. After calculating a route, a compact info bar appears at the top of the map showing the travel time, distance, and route name. If multiple alternative routes are available, Prev / Next buttons let you cycle through them directly on the map.
🖱️ Click Routes on the Map
Alternative routes drawn on the map are now clickable. Tapping or clicking any route line switches to that route and updates the info bar instantly.
📺 Fullscreen Mode Improvements
- The route search panel is now visible in fullscreen mode. It appears as a centered overlay anchored to the bottom of the screen, taking up 25% of the screen width.
- The show/hide toggle button continues to work normally in fullscreen.
- The route info bar now appears just above the search panel in fullscreen, rather than at the top of the screen.
- Traffic color segments on the active route are now rendered correctly in fullscreen.
⌨️ Shortcuts Now Highlight When Active
Pressing a shortcut button now visually highlights it so you always know which shortcut is currently selected. The highlight clears when you press the Clear button.
🧭 Navigate Always Opens the Right Route
Fixed a bug where pressing Navigate after switching to a different shortcut (without recalculating) would open Google Maps with the wrong coordinates. Navigate now always uses the last successfully calculated route.
📅 Date Picker Improvements
- The calendar now centers properly on mobile — it no longer slides off to one side.
- Today's date and the selected date no longer clash visually when they fall on the same day; a white ring makes the number readable in both cases.
- The Start Time and End Time selectors now inherit the card's background color instead of appearing white.
- The date range button now correctly inherits the card's background color instead of appearing white.
🎨 Theme & Color Fixes
- Travel mode buttons (driving / walking / transit / cycling), shortcut buttons, the Search button, and the Swap button now all use the same theme color source, ensuring consistent colors on both desktop and mobile browsers.
- Active mode buttons and selected shortcuts now use the same solid color as the Search button.
