Fix map card error rendering (#15910)

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -11,6 +11,7 @@ import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/chart/state-history-charts";
 import "../../../components/ha-card";
+import "../../../components/ha-alert";
 import {
   computeHistory,
   HistoryResult,
@@ -192,10 +193,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
         >
           ${this._error
             ? html`
-                <div>
-                  ${this.hass.localize("ui.components.history_charts.error")} :
+                <ha-alert alert-type="error">
+                  ${this.hass.localize("ui.components.history_charts.error")}:
                   ${this._error.message || this._error.code}
-                </div>
+                </ha-alert>
               `
             : html`
                 <state-history-charts

src/panels/lovelace/cards/hui-map-card.ts

@@ -22,6 +22,7 @@ import {
 import { computeDomain } from "../../../common/entity/compute_domain";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-card";
+import "../../../components/ha-alert";
 import "../../../components/ha-icon-button";
 import "../../../components/map/ha-map";
 import type {
@@ -65,7 +66,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _colorIndex = 0;
 
-  private _error?: string;
+  @state() private _error?: { code: string; message: string };
 
   private _subscribed?: Promise<(() => Promise<void>) | void>;
 
@@ -139,7 +140,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       return nothing;
     }
     if (this._error) {
-      return html`<div class="error">${this._error}</div>`;
+      return html`<ha-alert alert-type="error">
+        ${this.hass.localize("ui.components.map.error")}: ${this._error.message}
+        (${this._error.code})
+      </ha-alert>`;
     }
     return html`
       <ha-card id="card" .header=${this._config.title}>

src/translations/en.json

@@ -491,6 +491,9 @@
         "no_history_found": "No state history found.",
         "error": "Unable to load history"
       },
+      "map": {
+        "error": "Unable to load map"
+      },
       "statistics_charts": {
         "loading_statistics": "Loading statistics…",
         "no_statistics_found": "No statistics found.",