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

April 21, 2025|Testing|Google Maps, pan, Playwright, TypeScript, zoom

Automate panning and zooming in embedded Google Maps in Playwright with ease by driving the map’s own camera controls—no more wrestling with hidden APIs, unreliable synthetic drags, or silent no‑ops in page.evaluate(). In this post, you’ll discover a lightweight utility class that clicks the native “Zoom in/out” and “Move up/down/left/right” buttons just like a real user, ensuring rock‑solid, maintainable tests for your map interactions.

Table of Contents

1. Introduction
2. The Challenge
3. Solution Overview
4. Utility Class: GoogleMapsUtility
5. Code Explained (Shorthand)
6. Usage Example
7. Conclusion

1. Introduction

If you’ve ever tried automating embedded Google Maps in Playwright, you’ve probably run into one—or all—of these frustrating issues:

• no exposed map object to call official APIs,
• synthetic mouse drags that never register,
• or direct DOM tweaks (marker.position = …) doing nothing.

In this post, I’ll show you a clean, reliable approach: drive Google’s own on‑screen camera controls (zoom and pan buttons) exactly like a user would.

2. The Challenge

• Internal State Management: Google Maps maintains its own map state—zoom level, center coordinates, tilt, bearing—inside private variables. Simply updating the DOM element for the marker (<gmp-advanced-marker>) doesn’t propagate into that internal model, so the viewport never actually moves.
• No Global window.map: Unlike standalone google.maps examples, embedded maps in our app don’t expose the underlying Map instance on window. Attempts to call page.evaluate(() => window.map.setCenter(…)) silently fail because there is no global reference to hook into.
• Blocked Synthetic Drags: The map container is configured with complex pointer handlers and touch-action: none;. In headless or even headed Playwright runs, firing mouse.down() → mouse.move() → mouse.up() rarely triggers the drag logic inside Google Maps, so panning by brute force is unreliable.
• Hidden Controls & Timing: All zoom and pan arrows live in a hidden submenu activated by the “Map camera controls” button. If you don’t explicitly open that menu and wait for the buttons to render, your clicks either miss the target or time out waiting for visibility.
• Asynchronous Rendering: The controls themselves are injected after the map tiles load and may re-render on zoom or move. Any selector must wait for visibility each time before clicking, or you’ll hit stale-element errors.

3. Solution Overview

Key idea: Instead of fighting Google Maps’ internals, we simply click the map’s own built‑in camera controls—buttons labeled “Move up,” “Zoom in,” etc.—so that Google’s API handles all the heavy lifting under the hood. These controls are real <button> elements with stable ARIA labels, making them perfect, resilient targets for Playwright automation.

• Reliability: By leveraging the same UI a human would use, we avoid hidden APIs and emulate genuine user interactions that Google Maps is guaranteed to support.
• Visibility: ARIA labels like “Zoom in” and “Move left” never change, even as the DOM hierarchy re-renders—Playwright can wait for and click them consistently.
• No Low-Level Hacks: We no longer need complex page.evaluate() tricks or synthetic drag gestures that often break with each Maps update.
• Maintainability: A compact utility class encapsulates the pattern: open camera controls if needed, click the right buttons in sequence, and insert short delays for animation. Tests become cleaner and easier to reason about.

4. Utility Class: GoogleMapsUtility

5. Code Explained (Shorthand)

• MapAction: Union type for either a pan or zoom instruction.
• performMapActions(container, actions):
  1. Wait for map container to appear.
  2. If any pan steps exist, click “Map camera controls” to reveal arrows.
  3. Loop over actions:
     • For a pan, click “Move up/down/left/right” N times.
     • For a zoom, click “Zoom in/out” N times.
     • Pause briefly between clicks to let the map animate.

6. Usage Example

7. Conclusion

By leveraging Google Maps’ own camera controls, you avoid:

• Messing with hidden internal APIs.
• Fighting synthetic drag events.
• Silent no‑ops in page.evaluate().

This user‑driven approach is both robust and maintainable, perfect for long‑term Playwright test suites. Happy testing!