diff --git a/.gitignore b/.gitignore
index 0107ffdef5e1..3a5dda1378c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -94,6 +94,8 @@ npm-debug.log*
 ## @cypress/snapshot from apm plugin
 /snapshots.js
 /apm-diagnostics*.json
+/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/*.actual.png
+/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/*.diff.png
 
 # transpiled cypress config
 x-pack/plugins/fleet/cypress.config.d.ts
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/service_map.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/service_map.cy.ts
index 899ffe9d928b..2caeba304f3b 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/service_map.cy.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/service_map.cy.ts
@@ -50,27 +50,48 @@ describe('service map', () => {
   describe('when navigating to service map', () => {
     beforeEach(() => {
       cy.intercept('GET', '/internal/apm/service-map?*').as('serviceMap');
-      cy.visitKibana(serviceMapHref);
+    });
 
+    it.skip('shows nodes in service map', () => {
+      cy.visitKibana(serviceMapHref);
       cy.wait('@serviceMap');
-    });
+      cy.getByTestSubj('apmServiceGroupsTourDismissButton').click();
+
+      prepareCanvasForScreenshot();
 
-    it('shows nodes in service map', { retries: 3 }, () => {
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage();
+      cy.withHidden('[data-test-subj="headerGlobalNav"]', () =>
+        cy.getByTestSubj('serviceMap').matchImage({
+          imagesPath: '{spec_path}/snapshots',
+          title: 'global_service_map',
+          matchAgainstPath: 'cypress/e2e/service_map/snapshots/service_map.png',
+          maxDiffThreshold: 0.02, // maximum threshold above which the test should fail
+        })
+      );
     });
 
-    it('shows nodes in detailed service map', () => {
+    it.skip('shows nodes in detailed service map', () => {
       cy.visitKibana(detailedServiceMap);
+      cy.wait('@serviceMap');
       cy.contains('h1', 'opbeans-java');
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage();
+
+      prepareCanvasForScreenshot();
+
+      cy.withHidden('[data-test-subj="headerGlobalNav"]', () =>
+        cy.getByTestSubj('serviceMap').matchImage({
+          imagesPath: '{spec_path}/snapshots',
+          title: 'detailed_service_map',
+          matchAgainstPath:
+            'cypress/e2e/service_map/snapshots/detailed_service_map.png',
+          maxDiffThreshold: 0.02, // maximum threshold above which the test should fail
+        })
+      );
     });
 
     describe('when there is no data', () => {
       it('shows empty state', () => {
+        cy.visitKibana(serviceMapHref);
         // we need to dismiss the service-group call out first
-        cy.contains('Dismiss').click();
+        cy.getByTestSubj('apmServiceGroupsTourDismissButton').click();
         cy.getByTestSubj('apmUnifiedSearchBar').type('_id : foo{enter}');
         cy.contains('No services available');
         // search bar is still visible
@@ -79,3 +100,15 @@ describe('service map', () => {
     });
   });
 });
+
+function prepareCanvasForScreenshot() {
+  cy.get('html, body').invoke(
+    'attr',
+    'style',
+    'height: auto; scroll-behavior: auto;'
+  );
+
+  cy.wait(300);
+  cy.getByTestSubj('centerServiceMap').click();
+  cy.scrollTo('top');
+}
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/detailed_service_map.png b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/detailed_service_map.png
new file mode 100644
index 000000000000..a8d8ccdbd793
Binary files /dev/null and b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/detailed_service_map.png differ
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/service_map.png b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/service_map.png
new file mode 100644
index 000000000000..91fba348325b
Binary files /dev/null and b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/service_map.png differ
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts
index 204d05255ac5..da8b1d418f3a 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts
@@ -153,6 +153,12 @@ Cypress.Commands.add('dismissServiceGroupsTour', () => {
   );
 });
 
+Cypress.Commands.add('withHidden', (selector, callback) => {
+  cy.get(selector).invoke('attr', 'style', 'display: none');
+  callback();
+  cy.get(selector).invoke('attr', 'style', '');
+});
+
 // A11y configuration
 
 const axeConfig = {
diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts b/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts
index fe9ac641c1ce..46bdb95d6ff8 100644
--- a/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts
@@ -28,5 +28,6 @@ declare namespace Cypress {
     updateAdvancedSettings(settings: Record<string, unknown>): void;
     getByTestSubj(selector: string): Chainable<JQuery<Element>>;
     dismissServiceGroupsTour(): void;
+    withHidden(selector: string, callback: () => void): void;
   }
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_map/controls.tsx b/x-pack/plugins/apm/public/components/app/service_map/controls.tsx
index f73f798cbe94..a2695e071a32 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/controls.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/controls.tsx
@@ -212,6 +212,7 @@ export function Controls() {
       <Panel hasShadow={true} paddingSize="none">
         <EuiToolTip anchorClassName="eui-displayInline" content={centerLabel}>
           <Button
+            data-test-subj="centerServiceMap"
             aria-label={centerLabel}
             color="text"
             iconType="crosshairs"