Automating Google Maps Interactions in Playwright: Pan, Zoom & Camera Controls

googleMapsUtility.ts

import { Locator, Page, TestInfo } from '@playwright/test';

export type MapAction =
  | { type: 'pan'; direction: 'up' | 'down' | 'left' | 'right'; times: number }
  | { type: 'zoom'; direction: 'in' | 'out'; times: number };

export class GoogleMapsUtility {
  readonly page: Page;
  readonly testInfo: TestInfo;

  constructor(page: Page, testInfo: TestInfo) {
    this.page     = page;
    this.testInfo = testInfo;
  }

  async performMapActions(container: Locator, actions: MapAction[]): Promise<void> {
    // 1) Wait for the map container to be visible
    await container.waitFor({ state: 'visible' });

    // 2) If any pan is requested, click the camera‑controls toggle
    if (actions.some(a => a.type === 'pan')) {
      const cameraBtn = container.locator('button[aria-label="Map camera controls"]');
      await cameraBtn.click();
      await this.page.waitForTimeout(500);  // let the submenu render
    }

    // 3) Process each action
    for (const action of actions) {
      if (action.type === 'pan') {
        // choose the right arrow by ARIA label
        const label = ({
          up:    'Move up',
          down:  'Move down',
          left:  'Move left',
          right: 'Move right',
        })[action.direction];
        const btn = container.locator(`button[aria-label="${label}"]`);
        for (let i = 0; i < action.times; i++) {
          await btn.click();
          await this.page.waitForTimeout(300);
        }
      } else {
        // zoom in or out
        const label = action.direction === 'in' ? 'Zoom in' : 'Zoom out';
        const btn   = container.locator(`button[aria-label="${label}"]`);
        for (let i = 0; i < action.times; i++) {
          await btn.click();
          await this.page.waitForTimeout(300);
        }
      }
    }
  }
}

test.spec.ts

import { test } from '@playwright/test';
import { GoogleMapsUtility, MapAction } from './googleMapsUtility';

test('Pan & zoom via camera controls', async ({ page }, testInfo) => {
  const mapsUtil     = new GoogleMapsUtility(page, testInfo);
  const mapContainer = page.locator('#map_container');

  const actions: MapAction[] = [
    { type: 'zoom', direction: 'out', times: 3 },
    { type: 'pan',  direction: 'up',   times: 2 },
    { type: 'zoom', direction: 'in',   times: 4 },
    { type: 'pan',  direction: 'right',times: 1 }
  ];

  await page.goto('https://…your-form-with-map…');
  await mapsUtil.performMapActions(mapContainer, actions);

  // continue with your form submission or assertions…
});

https://evagoras.com/2025/04/21/automating-google-maps-interactions-in-playwright-pan-zoom-camera-controls/