Hey Dennis, great question! The issue with your initial code (jQuery('.gmap').setZoom(19);) is that you're trying to call Google Maps methods directly on a DOM element, not the actual Google Maps instance. Beaver Builder stores the map object internally, so we need to access that first. Let's walk through the solutions step by step:

1. Access the Google Map Instance & Adjust Zoom/Center #

Beaver Builder typically attaches the Google Maps instance to the map container element via data() properties. Here's how to grab it and modify zoom/center:

// Wait for the page and map to fully load
jQuery(window).on('load', function() {
  // Target Beaver Builder's map container (class may vary slightly by version)
  const mapContainer = jQuery('.fl-builder-google-map');
  
  // Retrieve the stored Google Maps instance
  const map = mapContainer.data('map');
  
  if (map instanceof google.maps.Map) {
    // Set your desired zoom level
    map.setZoom(19);
    
    // Set custom center coordinates (replace with your target lat/lng)
    const customCenter = new google.maps.LatLng(50.8498, 4.3499); // Example coords for your site's region
    map.setCenter(customCenter);
  }
});

Why this works: #

• We wait for window.load to ensure the map is fully initialized
• .fl-builder-google-map is the standard class Beaver Builder uses for map containers (verify this via your browser's dev tools if needed)
• The data('map') property holds the actual google.maps.Map object, which has all the native API methods like setZoom() and setCenter()

2. Control Marker Clusters & Highlight Specific Markers #

If you're using marker clustering, Beaver Builder usually integrates the MarkerClusterer library. Here's how to target a specific marker and interact with its cluster:

jQuery(window).on('load', function() {
  const mapContainer = jQuery('.fl-builder-google-map');
  const map = mapContainer.data('map');
  
  if (map && map.markers) {
    // Find your target marker (filter by title, custom data, etc.)
    const targetMarker = map.markers.find(marker => {
      // Example: match marker by title
      return marker.title === 'Your Target Marker Title';
      // Alternative: use custom data if you added it in Beaver Builder
      // return marker.customData.yourField === 'Your Value';
    });
    
    if (targetMarker) {
      // Zoom and center on the marker
      map.setZoom(19);
      map.setCenter(targetMarker.getPosition());
      
      // Expand the cluster containing the marker (if applicable)
      if (map.clusterer) {
        const cluster = map.clusterer.getCluster(targetMarker);
        if (cluster) {
          cluster.triggerClick(); // Forces the cluster to expand
        }
      }
      
      // Optional: Open the marker's info window
      if (targetMarker.infoWindow) {
        targetMarker.infoWindow.open(map, targetMarker);
      }
    }
  }
});

Key Notes: #

• Add the code correctly: Paste this into your theme's custom JavaScript section, or use a Beaver Builder Custom HTML module placed at the bottom of your page.
• Verify class names: If .fl-builder-google-map doesn't work, inspect your map element in dev tools to find the correct container class.
• API Dependency: Ensure the Google Maps API is loaded (Beaver Builder should handle this, but double-check your API key is valid in the plugin settings).

内容的提问来源于stack exchange，提问作者Dennis