At the moment, Agile Store Locator places one marker per exact latitude/longitude. If multiple stores share the same coordinates, the markers will overlap.

Recommended Solution: Slightly Adjust Store Position Manually

You can easily fix this by slightly offsetting one or more store locations directly from the store editor. This keeps the stores visually side by side on the map while still representing the same building.

Step-by-Step: Offset Store Markers in the Same Building

1- Open the Store Editor

• Go to Agile Store Locator → Manage Stores
• Edit one of the stores that shares the same address

2- Fully Zoom Into the Location

• In the map inside the store editor, zoom in as much as possible
• This gives you precise control over marker placement

3- Slightly Drag the Marker

• Click and drag the marker just a little away from its current position
• The movement should be very small — just enough to avoid overlap
• The store will still appear in the same building visually

4- Save the Store

• Click Save Store
• Repeat the same steps for other stores if needed

Result

• Store icons will appear side by side instead of overlapping
• Each store remains clickable and visually distinct
• Works perfectly with different marker icons
• No custom code or configuration required

Important Notes

• This is a visual adjustment only — it does not affect store address data
• Best practice for:
  • Malls
  • Office buildings
  • Hospitals
  • Shared commercial locations
• The offset should be minimal to maintain accurate map representation

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"]

To enable old style zoom control, add the zoomcontrol attribute as true.

[ASL_STORELOCATOR zoomcontrol="true" 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.

Here is the list of settings, that can be used as part of the shortcode.

1- Enable the Radius Circle from the ASL Settings > Maps.

2- Enable the Advance Filter & Distance Control in the ASL Settings > General tab.

3- Choose the Dropdown for the distance filter and add your values to appear in it.

4- Once you enable these settings, save the settings.

Now, once you will perform a search the radius circle will appear, and the map will fit bound to the selected range of the distance, to change the color of the radius circle, please follow the document about how to change the radius circle color.

By default, if no option is selected, the Store Locator will display the Roadmap view.

Where to Change the Map Type

You can adjust the default map style directly from the plugin settings:

1. Go to ASL Settings in your WordPress dashboard.
2. Open the Maps tab.
3. Locate the Map Type dropdown.
4. Select your preferred map style and save the settings.

This will apply the selected map type across your Store Locator.

Override via Shortcode Attribute

If you want to override the global setting for a specific Store Locator instance, you can use the map_type attribute in the shortcode:

 [ASL_STORELOCATOR map_type="satellite"]

Available Map Type Options

You can use any of the following values:

• roadmap
• satellite
• hybrid
• terrain

In the Map Language field, a two-character language code is required such as fr, de, pl, etc which must in a small code, the country code can be seen from here.

The above code will only change the language of Google Maps and not the complete widget, the widget translation is available in the Store Locator translation guide.

In case you have multiple maps on different pages, each widget can have its own language through the shortcode attribute.

[ASL_STORELOCATOR map_language="de"]

 

Image of Customize Google Map, Agile Store Locator

Lastly, traffic, bicycle, and transit layers can also be enabled/disabled through this tab. Moreover, admin users can also allow the marker to animate through the “Animate Marker Switch” button.

Lastly, clustering is enabled from “ASL Settings” or by using the shortcode provided below.

[ASL_STORELOCATOR cluster="1"]

For the last few months and for some users, Marker Clusterer is having some problems with mobile devices on click of the cluster so it is recommended to use the newer version.

Change the Colors using Marker Clusterer (New)

In order to change the cluster colors, you have to provide the color code in hex format in the shortcode. The shortcode attributes are cluster_m1 and cluster_m2, which you need to add to the shortcode, as shown below.

[ASL_STORELOCATOR cluster_m1="#FF0000" cluster_m2="#FFFF00"]

Change Cluster Colors using Marker Clusterer Plus

The plugin is using CSS-based clusters from its version 4.6.12. Therefore, if you have an older version, you have to upgrade to the latest version of the plugin to make it work. Here are the CSS rules that can be applied to change the cluster colors. In addition, the color values must be in hex format.

body .asl-cont .asl-cluster-1, body .asl-p-cont .asl-cluster-1 {--cluster-color: #00a2d3;} body .asl-cont .asl-cluster-2, body .asl-p-cont .asl-cluster-2 {--cluster-color: #ff9b00;} body .asl-cont .asl-cluster-3, body .asl-p-cont .asl-cluster-3 {--cluster-color: #ff6969;}

In the above CSS lines, the hex codes can be changed. After that, the CSS can be placed into the Theme style.css or Additional CSS under the Appearance in the wp-admin panel.

To see the option such as grid size and max size of the cluster, follow the guide article.

Example of Shortcode Attribute

[ASL_STORELOCATOR minZoom="5" maxZoom="15"]

Google Maps Zoom Capabilities

This section will answer some of the most common questions associated with the “zooming” capabilities of Google Maps and Google Maps API.

How Many Zoom Levels are There in Google Maps?

Google Maps has a zoom range between 1 and 22. With zoom level 1 you will be able to see the whole world on the map, while zoom level 22 gives you a street view of a particular location.

What is the Highest Zoom Level?

For Google Maps the highest zoom level is 22, which enables the map to zoom in at the street level.

Google Map API Zoom Range

A Google Maps API key is usually required to embed Google Maps onto a website. Moreover, maps embedded through the Google Maps API key have a zoom level that typically falls in the range of 1-22. 

How to Zoom in on Google Maps

To zoom in on Google Maps simply press the zoom slider (“+” or “-” signs) to zoom in or out of Google Maps.

Alternatively, you can use the scroll wheel of your mouse to zoom in and out of Google Maps.

Restricting Map Bounds and Zoom

In some cases, a user may require an embedded Google Maps to have a specific custom zoom range that falls within the maximum and minimum zoom levels. To do this you will have to set the “restriction” “maxZoom” and “minZoom” options using a specific code.

Refer to this page for more instructions.

Conclusion

That concludes this short guide on Google Maps’ zoom capabilities. Google Maps possess maps with zooming capabilities that can suit the need of everyone that wants to embed Google Maps on their website. Lastly, it might be worth mentioning that certain plugins, such as Agile Store Locator, are the perfect tool for easily embedding Google Maps onto your website