Camera Control in Google Maps JavaScript API

In February 2025, Google introduced version 3.58 of the Google Maps JavaScript API, featuring the new Camera Control. This update enhances user interaction by combining zoom and pan functionalities into a single, streamlined control, making map navigation more intuitive.

What is the Camera Control? #

The Camera Control replaces the traditional zoom control, offering users an integrated tool to both zoom and pan the map. This design simplifies map interactions, allowing users to adjust their view with a single gesture.

Implementation Details #

The behavior of the Camera Control depends on your map’s current configuration:

1. Default Settings: If your map doesn’t explicitly enable or disable the zoomControl and hasn’t set disableDefaultUI to true, the Camera Control will appear by default.
2. Zoom Control Enabled: If zoomControl is enabled, both the traditional Zoom Control and the new Camera Control will be displayed.
3. Zoom Control Disabled: If zoomControl is disabled, only the Camera Control will be shown.
4. Default UI Disabled: If disableDefaultUI is set to true and zoomControl is enabled, only the traditional Zoom Control will be visible, excluding the Camera Control.

How to Customize the Camera Control #

To tailor the Camera Control to your application’s needs, adjust the map options during initialization:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 37.7749, lng: -122.4194 },
  zoom: 12,
  cameraControl: true, // Enable Camera Control
  zoomControl: false,  // Disable traditional Zoom Control
  // Other options...
});

In this example, the map initializes with the Camera Control enabled and the traditional Zoom Control disabled.

How to Enable or Disable Camera Control in Agile Store Locator #

To manage the display of the Camera Control in Agile Store Locator, you can utilize the cameraControl attribute within the [ASL_STORELOCATOR] shortcode. This attribute allows you to enable or disable the Camera Control feature according to your preferences.

Usage:

To disable the Camera Control, set the cameraControl attribute to "false":

[ASL_STORELOCATOR cameraControl="false"]

By default, the Camera Control is enabled. Adjusting this attribute allows you to customize the map’s user interface to better suit your website’s design and user experience.

For more detailed information on configuring the Agile Store Locator plugin, refer to the official Agile Store Locator Documentation.