网站Google Maps标记InfoWindow默认显示方案求助

Got it, let's fix this auto-opening InfoWindow issue for your Google Maps marker. Here's what's going wrong and how to fix it step by step:

What's the Problem with Your Current Code? #

1. You tried binding to DOMContentLoaded on the marker, but Google Maps Marker objects don't have this event—that's why your event never fired. The correct click event for markers is simply click.
2. Your earlier attempt to trigger on load/domready failed because those events fire before the map and markers are fully initialized.

Fixed Code Implementation #

Replace the for-loop section in your googleMap plugin with this updated code:

for (var r in s.locations) {
  // Create the marker as before
  l[r] = new google.maps.Marker({
    position: new google.maps.LatLng(parseFloat(s.locations[r].y), parseFloat(s.locations[r].x)),
    map: i,
    icon: s.locations[r].basic,
    index: r
  });

  if (s.locations[r].content) {
    // Bind the correct click event for marker interaction
    google.maps.event.addListener(l[r], "click", function() {
      // Reset all markers to basic icon
      for (var t in l) {
        l[t].setIcon(s.locations[t].basic);
      }
      // Set current marker to active icon
      this.setIcon(s.locations[this.index].active);
      // Populate and open the InfoWindow
      c.setContent(s.locations[this.index].content);
      c.open(i, this);
      // Apply your custom wrapper class
      $(".gm-style-iw").parent().parent().addClass("gm-wrapper");
    });

    // Keep the closeclick handler to reset markers when InfoWindow closes
    google.maps.event.addListener(c, "closeclick", function() {
      for (var a in l) {
        l[a].setIcon(s.locations[a].basic);
      }
    });
  }
}

// Auto-open the InfoWindow once the map is fully loaded
google.maps.event.addListenerOnce(i, 'idle', function() {
  // Target the first marker (adjust index if you need a different one)
  const targetMarker = l[0];
  if (targetMarker && s.locations[targetMarker.index].content) {
    // Reset all markers to basic
    for (var t in l) {
      l[t].setIcon(s.locations[t].basic);
    }
    // Activate the target marker
    targetMarker.setIcon(s.locations[targetMarker.index].active);
    // Open the InfoWindow
    c.setContent(s.locations[targetMarker.index].content);
    c.open(i, targetMarker);
    // Apply custom styling
    $(".gm-style-iw").parent().parent().addClass("gm-wrapper");
  }
});

Key Changes Explained #

• Corrected Marker Event: Swapped DOMContentLoaded for the valid click event, so marker clicks work as expected.
• Map Idle Event: Used google.maps.event.addListenerOnce(i, 'idle', ...) to trigger the auto-open logic. The idle event fires only after the map has finished loading all resources and stabilizing its view—this solves the "script loads too late" problem.
• Consistent Logic: The auto-open code mirrors the click event logic, ensuring marker icons and InfoWindow styling stay consistent whether the window opens automatically or via user click.

Customization Tip #

If you have multiple markers and want to auto-open a specific one (not the first), replace l[0] with the correct index (e.g., l[2] for the third marker) or add a check for a unique marker property (like a custom data attribute) to target it dynamically.

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