🚀 New Features

🌍 New: Map & Format Language

You can now choose what language the map labels and date/number formatting use, independently of your Home Assistant profile language. Perfect if you run HA in English but want city names in your native script (Cyrillic, Japanese, Arabic, etc.).

• New Map Language dropdown in the visual editor (next to Map Type)
• Or set it in YAML: language: ja
• Affects map labels (city names, streets) and in-card date/number formatting
• Leave empty to fall back to your HA profile language

Note: Google Maps reads the language only at script load time, so a full page reload (Ctrl+Shift+R) is required after changing this setting.

---

📅 New: External Date Control

You can now bind the history date range to Home Assistant input_datetime entities.

Two modes:

Single day — one entity expanded to that day's full 00:00–23:59 range:

type: custom:google-map-card
api_key: YOUR_KEY
history_date_entity: input_datetime.map_date
entities:
  - person.alice

Date range — explicit start and end:

history_start_entity: input_datetime.history_start
history_end_entity: input_datetime.history_end

When external entities are configured:

• The map updates automatically whenever the entity changes
• The internal date picker button becomes read-only (a brief opacity flash and tooltip indicate it's controlled externally)
• Multiple cards bound to the same entity stay in sync
• All input_datetime formats are supported (date-only, time-only, date+time, timestamp attributes)
• Configurable from the visual editor in the new External Date Control section

This eliminates the need for config-template-card workarounds entirely. One entity, one source of truth, perfect dashboard sync.

---

⚡ Performance — major improvements

A full pass on RAM and CPU usage. The card should feel noticeably snappier, especially on dashboards with many entities or active history tracks.

Updated Dependencies on API Side and README File

Updated Dependencies on API Side and README File

Please don't forget to:

• Hard reset your browser: Ctrl + Shift + R
• Clear Mobile app cache:
  • Companion App Android version
    1. Go to the sidebar and click on Settings
    2. Scroll down until you see Companion app item and click on it
    3. Scroll down until you see Troubleshooting item and click on it
    4. Click on Reset frontend cache
    5. Close the App and open it again
  • Companion App iOS version
    1. Go to the sidebar and click on App configuration
    2. Go to Debugging and click on Reset frontend cache
    3. Close the App and open it again

Dependency and Readme file updates

Updated Dependencies on API Side and README File

Please don't forget to:

• Hard reset your browser: Ctrl + Shift + R
• Clear Mobile app cache:
  • Companion App Android version
    1. Go to the sidebar and click on Settings
    2. Scroll down until you see Companion app item and click on it
    3. Scroll down until you see Troubleshooting item and click on it
    4. Click on Reset frontend cache
    5. Close the App and open it again
  • Companion App iOS version
    1. Go to the sidebar and click on App configuration
    2. Go to Debugging and click on Reset frontend cache
    3. Close the App and open it again

🛠️ Bug Fix

• Fixed an issue with the edit button on the Panel layout dashboards

🚀🚀 New Feature: Rotate Map

🔄 Vector Map & Free Rotation

The card now supports Google Maps' WebGL-based vector rendering mode, unlocking true 360° rotation and tilt on any map type — roadmap, satellite, hybrid, and terrain — with no Map ID or Google Cloud Console setup required.

New config parameters

Key	Type	Default	Description
rendering_type	string	raster	raster (default) or vector. Vector mode enables free rotation and tilt.
color_scheme	string	light	Vector mode only. light, dark, or follow_system. Replaces theme_mode in vector mode.

Rotate & Tilt Grid Control (cameraControl in vector mode)

In vector mode, enabling cameraControl: true replaces the native (non-functional) pan buttons with a custom rotate & tilt grid:

        [ ↑ Decrease Tilt ]
[ ← Rotate ]  [ ⟳ Reset ]  [ → Rotate ]
        [ ↓ Increase Tilt ]

• Rotate step: 15°
• Tilt step: 10° (range 0°–67.5°)
• ⟳ resets both heading and tilt to 0

Mobile: 2-Finger Gestures (vector mode only)

• 2-finger drag up/down → tilt the map (perspective control)
• 2-finger rotate → rotate the map heading freely

These gestures are native to Google Maps vector rendering and require no additional configuration — they activate automatically when rendering_type: vector is set.

Right-click + Drag to Tilt (vector mode only)

• Hold right mouse button and drag down → increase tilt (more perspective)
• Hold right mouse button and drag up → decrease tilt (flatter)
• Release without dragging → right-click popup opens as normal

UI Editor

• Rendering Mode dropdown added to Main Settings (Raster / Vector)
• When Vector is selected, the Theme dropdown is replaced by a Color Scheme selector (Light / Dark / Follow System)

Notes

• theme_mode and the 40+ built-in JSON themes are not available in vector mode (Google API limitation — the styles array is raster-only)
• color_scheme takes effect at map initialization only; changing it via the editor triggers an automatic reload
• Raster mode behavior is completely unchanged

---

📐 Dashboard Layout Tips (README)

Added a new Dashboard Layout Tips section to the README explaining:

• Masonry / Panel dashboards: use aspect_ratio to control card height
• Sections dashboards: use aspect_ratio and use grid_options: columns: full / rows: auto to adjust the size properly

---

⚠️ Rotate & Tilt Limitations (README)

Expanded the rotateControl documentation to clearly explain:

• When the native rotate control works (satellite/hybrid, zoom ≥ 15, supported cities only)
• Why it doesn't work on roadmap / terrain (raster tile rendering limitation)
• Reference to the new vector mode for unrestricted rotation

🆕 New Features

Hide Google & Apple Maps Links (hide_map_links)

Added a new option to hide the Google Maps and Apple Maps links that appear in entity and map-click info popups. Useful for cleaner dashboards or when external navigation links are not needed and rendering long entity names

hide_map_links: true

Available in the UI editor under Appearance → Hide Google & Apple Maps Links.

FlightRadar24 Link in Flight Popups

When clicking on a flight entity, the info popup header now shows a FlightRadar24 link instead of Google Maps / Apple Maps links. The link resolves as follows:

• Direct flight page if flight_id is available
• Aircraft history page via registration number if flight_id is not available
• FlightRadar24 homepage as fallback

🔺 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:

1. Go to APIs & Services → Quotas and manually lower the "Unlimited" daily request limits per API. (e.g., 150)
2. Go to Billing → Budgets & Alerts and create a budget alert (e.g., $2/month).
3. 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.

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

⚠️⚠️⚠️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

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"

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

⚠️⚠️⚠️PLEASE READ WHOLE NOTES AND UPDATED README DOCUMANTATION CAREFULLY⚠️⚠️⚠️

v5.0.1: Route Search Limit increased to: 50 and You don't need Geolocation API anymore

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

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"

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

⚠️⚠️⚠️PLEASE READ WHOLE NOTES AND UPDATED README DOCUMANTATION CAREFULLY⚠️⚠️⚠️

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

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 30 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 30/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"