diff --git a/demo/src/stubs/entities.ts b/demo/src/stubs/entities.ts
index 132515a014ad..8c863f9a3bb6 100644
--- a/demo/src/stubs/entities.ts
+++ b/demo/src/stubs/entities.ts
@@ -1,5 +1,55 @@
 import { convertEntities } from "../../../src/fake_data/entity";
 
+export const mapEntities = () =>
+  convertEntities({
+    "zone.home": {
+      entity_id: "zone.home",
+      state: "zoning",
+      attributes: {
+        hidden: true,
+        latitude: 52.3631339,
+        longitude: 4.8903147,
+        radius: 200,
+        friendly_name: "Home",
+        icon: "hademo:home",
+      },
+    },
+    "zone.uva": {
+      entity_id: "zone.buckhead",
+      state: "zoning",
+      attributes: {
+        hidden: true,
+        radius: 400,
+        friendly_name: "UvA",
+        icon: "hademo:school",
+        latitude: 52.3558182,
+        longitude: 4.9535376,
+      },
+    },
+    "person.arsaboo": {
+      entity_id: "person.arsaboo",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Arsaboo",
+        latitude: 52.3579946,
+        longitude: 4.8664597,
+        entity_picture: "/assets/arsaboo/images/arsaboo.jpg",
+      },
+    },
+    "person.melody": {
+      entity_id: "person.melody",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Melody",
+        latitude: 52.3408927,
+        longitude: 4.8711073,
+        entity_picture: "/assets/arsaboo/images/melody.jpg",
+      },
+    },
+  });
+
 export const energyEntities = () =>
   convertEntities({
     "sensor.grid_fossil_fuel_percentage": {
diff --git a/demo/src/stubs/lovelace.ts b/demo/src/stubs/lovelace.ts
index 6896de37ef09..8712f51a66a2 100644
--- a/demo/src/stubs/lovelace.ts
+++ b/demo/src/stubs/lovelace.ts
@@ -7,16 +7,25 @@ import {
 } from "../configs/demo-configs";
 import "../custom-cards/cast-demo-row";
 import "../custom-cards/ha-demo-card";
+import { mapEntities } from "./entities";
 
 export const mockLovelace = (
   hass: MockHomeAssistant,
   localizePromise: Promise<LocalizeFunc>
 ) => {
-  hass.mockWS("lovelace/config", () =>
-    Promise.all([selectedDemoConfig, localizePromise]).then(
+  hass.mockWS("lovelace/config", ({ url_path }) => {
+    if (url_path === "map") {
+      hass.addEntities(mapEntities());
+      return {
+        strategy: {
+          type: "map",
+        },
+      };
+    }
+    return Promise.all([selectedDemoConfig, localizePromise]).then(
       ([config, localize]) => config.lovelace(localize)
-    )
-  );
+    );
+  });
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
diff --git a/src/fake_data/demo_panels.ts b/src/fake_data/demo_panels.ts
index 319aa4997827..dbf70b4b1df8 100644
--- a/src/fake_data/demo_panels.ts
+++ b/src/fake_data/demo_panels.ts
@@ -66,10 +66,10 @@ export const demoPanels: Panels = {
   //   url_path: "history",
   // },
   map: {
-    component_name: "map",
+    component_name: "lovelace",
     icon: "hass:tooltip-account",
     title: "map",
-    config: null,
+    config: { mode: "storage" },
     url_path: "map",
   },
   energy: {