diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index 17b5a498a4c..66e71c1403b 100644
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx
@@ -128,8 +128,11 @@ export class GeomapPanel extends Component<Props, State> {
     // Check for resize
     if (this.props.height !== nextProps.height || this.props.width !== nextProps.width) {
       this.map.updateSize();
-      if (this.props.options?.view?.dashboardVariable) {
-        this.updateGeoVariables(this.map.getView());
+      // update dashboard variable if enabled
+      const options = this.props.options;
+      if (options.view.dashboardVariable) {
+        const view = this.map.getView();
+        this.updateGeoVariables(view, options);
       }
     }
 
@@ -233,6 +236,28 @@ export class GeomapPanel extends Component<Props, State> {
     this.setState({ legends: this.getLegends() });
   }
 
+  // view listerner handler, used to unregister when view changes
+  private viewListernerKey: EventsKey | null = null;
+
+  // updateGeoVariables debounce timeout
+  private timeoutId: NodeJS.Timeout | null = null; // for debounce
+
+  // Updates the dashboard variable `mapViewData` with the view extent value.
+  // Use a debounce strategy to wait the user stop dragging or zooming the map.
+  updateGeoVariables = (view: View, options: Options) => {
+    const bounds = view.calculateExtent();
+    const bounds4326 = transformExtent(bounds, 'EPSG:3857', 'EPSG:4326');
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+    this.timeoutId = setTimeout(() => {
+      if (options.controls.showDebug) {
+        console.log('GeomapPanel.updateGeoVariables', bounds4326);
+      }
+      locationService.partial({ 'var-mapViewData': `${bounds4326}` }, true);
+    }, 500);
+  };
+
   initMapAsync = async (div: HTMLDivElement | null) => {
     if (!div) {
       // Do not initialize new map or dispose old map
@@ -274,7 +299,9 @@ export class GeomapPanel extends Component<Props, State> {
     }
     this.layers = layers;
     this.map = map; // redundant
-    this.initViewExtent(map.getView(), options.view);
+    const view = map.getView();
+    const viewConfig = options.view;
+    this.initViewExtent(view, viewConfig);
 
     this.mouseWheelZoom = new MouseWheelZoom();
     this.map?.addInteraction(this.mouseWheelZoom);
@@ -284,6 +311,20 @@ export class GeomapPanel extends Component<Props, State> {
     notifyPanelEditor(this, layers, layers.length - 1);
 
     this.setState({ legends: this.getLegends() });
+
+    // register view listener to update dashboard variable if enabled
+    if (viewConfig.dashboardVariable) {
+      if (options.controls.showDebug) {
+        console.log('Geomap.initMapAsync: register view listener', view);
+      }
+      if (this.viewListernerKey != null) {
+        view.un('change', this.viewListernerKey.listener);
+      }
+      this.viewListernerKey = view.on('change', () => {
+        this.updateGeoVariables(view, options);
+      });
+      this.updateGeoVariables(view, options);
+    }
   };
 
   clearTooltip = () => {
@@ -337,37 +378,7 @@ export class GeomapPanel extends Component<Props, State> {
     return view;
   };
 
-  /**
-   * Updates the dashboard variable `mapViewData` with the view extent value.
-   * Use a debounce strategy to wait the user stop dragging or zooming the map.
-   */
-  private timeoutId: NodeJS.Timeout | null = null; // for debounce
-
-  updateGeoVariables = (view: View) => {
-    const bounds = view.calculateExtent();
-    const bounds4326 = transformExtent(bounds, 'EPSG:3857', 'EPSG:4326');
-    console.log('GeomapPanel.updateGeoVariables', bounds4326);
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-    this.timeoutId = setTimeout(() => {
-      locationService.partial({ 'var-mapViewData': `${bounds4326}` }, true);
-    }, 500);
-  };
-
-  private viewListernerKey: EventsKey | null = null;
-
   initViewExtent(view: View, config: MapViewConfig) {
-    if (config.dashboardVariable) {
-      if (this.viewListernerKey != null) {
-        view.un('change', this.viewListernerKey.listener);
-      }
-      this.viewListernerKey = view.on('change', () => {
-        this.updateGeoVariables(view);
-      });
-      this.updateGeoVariables(view);
-    }
-
     const v = centerPointRegistry.getIfExists(config.id);
     if (v) {
       let coord: Coordinate | undefined = undefined;