Skip to content

🚀🚀 New Feature: ROUTE SEARCH and TRAVEL TIME 🚀🚀

Choose a tag to compare

View all tags
@cataseven cataseven released this 28 Feb 15:55
v5.0.2
ba0539b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

⚠️⚠️⚠️IF YOU ARE STILL USING v4.x.x PLEASE READ WHOLE NOTES AND UPDATED README DOCUMANTATION CAREFULLY⚠️⚠️⚠️

If you are already using v5.x.x then 5.0.2 notes are just enough for you

Google Maps Card — v5.0.2

🎨 Theme Support

The card now fully adapts to your Home Assistant theme. Whether you use a dark, light, or custom theme, all panels, dropdowns, and popups automatically pick up your theme's colors and fonts — including on mobile devices.

🗺️ Route Search — New Features

↕ Swap Button
A new button next to the FROM / TO fields lets you swap the origin and destination with a single tap.

Navigate Button
After calculating a route, a Navigate button appears in the toolbar. Tapping it opens Google Maps with your selected travel mode (driving, walking, transit, cycling) ready to start navigation.

Horizontal Scroll
The toolbar row (mode buttons, shortcuts, etc.) now scrolls horizontally on mobile so buttons never get cramped on small screens.

🗺️ Google Maps Card v5.0.0 — Route Search and Travel Time Calculator

image

Route

image image

Calculate real-time travel times between any combination of entities, zones, or addresses — right from your dashboard. The panel supports driving, walking, transit, and cycling modes with live traffic visualization on the map.

Highlights

🚗 Multi-Modal Route Calculation
Choose between Driving, Walking, Transit, or Cycling. For driving routes, the card fetches real-time traffic data and renders color-coded polylines directly on the map:

  • 🟢 Green — Normal flow
  • 🟡 Yellow — Slow traffic
  • 🔴 Red — Heavy traffic / Traffic jam

🔀 Alternative Routes with Traffic
When multiple route alternatives are available, each one is shown on the map. Switching between alternatives fetches and renders the correct traffic overlay for that specific route — not just the default.

📍 Smart Address Autocomplete
Uses the new Places API (New) with PlaceAutocompleteElement for a native, fast autocomplete experience. Type any address and get instant suggestions.

⚡ Route Shortcuts
Define frequently used routes (e.g., Home → Work) with custom icons and labels. One tap to calculate — no need to re-enter addresses every time.

  • Collapsible shortcut editor with label-based headers
  • Supports person, device_tracker, and zone entities
  • Custom MDI icons per shortcut

🔲 Docked Panel Layout
The panel docks to any side of the map — above, below, left, or right — with configurable size. Toggle visibility with a map button whose position is fully customizable from the Map Button Positioning section.

🔑 Required Google APIs

Users are solely responsible for their API settings, API Quotas, API Quota Alarms or any charges incurred on their Google Cloud account.

To use the Route Search & Travel Time Calculator, the following APIs must be enabled in your Google Cloud Console:

API Purpose
Directions API Route calculation, alternatives, duration & distance
Places API (New) Address autocomplete
Routes API Real-time traffic segment data for color-coded polylines

💡 These APIs are in addition to the Maps JavaScript API and Geometry library that the card already requires.

🛡️ API Quota & Cost Management — IMPORTANT

What we do on our side

This lovelace card enforces a built-in daily limit of 50 route calculations per API key. This counter is shared across all card instances using the same API key on the same browser. This is a safety net but that doesn't mean it will work perfectly and it can't be protect your api limits!!. It is not a budget tool. Google limits are also very high for free (even most of them are unlimited for free)

However in case Google change their api policy What YOU must do

Set up budget alerts and API quotas in Google Cloud Console. This is your responsibility.

  1. Go to APIs & Services → Quotas in Cloud Console
  2. Set a daily request limit for each API:
    • Directions API: e.g., 100 requests/day
    • Routes API: e.g., 100 requests/day
    • Places API (New): e.g., 500 requests/day
  3. Go to Billing → Budgets & Alerts and create a budget alert (e.g., $5/month)
  4. Consider restricting your API key to only the APIs you need

⚠️ Google provides a 10.000 search per month which covers significant usage. However, misconfigured automations or heavy usage can exceed this. The card's built-in 50/day limit is a soft guard — it is NOT a substitute for proper Cloud Console quota configuration. You are solely responsible for any charges incurred on your Google Cloud account.

📋 Configuration Options

type: custom:google-maps-card
api_key: YOUR_API_KEY
travel_panel_enabled: true
travel_panel_position: below        # above | below | left | right
travel_panel_size: 310              # Height (px) for above/below, Width for left/right
travel_panel_toggle_button_position: LEFT_BOTTOM
travel_shortcuts:
  - label: "Go to Work"
    icon: "mdi:office-building"
    from_entity: "person.cenk"
    to_entity: "zone.office"
  - label: "Go Home"
    icon: "mdi:home"
    from_entity: "person.cenk"
    to_entity: "zone.home"
Assets 3
Loading