Google Maps事件监听器（mouseover/click）失效问题求助

Hey there! Let's dig into why your Google Maps API markers' mouseover and click listeners aren't working. Here are some common fixes and checks to try out:

1. Verify You're Binding Events to the Marker Instance #

It's easy to accidentally bind events to a custom DOM element instead of the actual Google Maps Marker object. Make sure you're calling addListener directly on the marker you created with google.maps.Marker:

// Correct approach: Bind to the Marker instance
const customMarker = new google.maps.Marker({
  position: { lat: 40.7128, lng: -74.0060 },
  map: yourMapInstance,
  icon: yourCustomIcon // Custom icons are fine, just keep using the Marker object
});

// Add click listener
customMarker.addListener('click', () => {
  yourInfoWindow.open(yourMapInstance, customMarker);
});

// Add mouseover listener
customMarker.addListener('mouseover', () => {
  // Your hover behavior (e.g., change icon, show preview)
});

2. Ensure Code Runs After Map Initialization #

If you try to attach listeners before the map is fully loaded, the events won't register. Wrap your marker creation and listener code inside the map's initialization callback:

function initMap() {
  const yourMapInstance = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12
  });

  // Create markers and bind listeners HERE, after map is ready
  const customMarker = new google.maps.Marker({ /* ... */ });
  customMarker.addListener('click', () => { /* ... */ });
}

// Trigger map init when the page loads
google.maps.event.addDomListener(window, 'load', initMap);

3. Check for Info Window Interference #

Sometimes an open info window can completely cover the marker, blocking subsequent mouseover/click events. Try adjusting the info window's position (using pixelOffset) to avoid covering the marker, or add logic to ensure the marker is interactive even when the info window is open.

4. Fix Event Bubbling for Custom DOM-Based Markers #

If you're using a fully custom marker (e.g., built with OverlayView instead of the default Marker), DOM event bubbling might prevent Google Maps from catching the events. Add a stop propagation handler to your custom element, then manually trigger the marker's event:

// Example for a custom DOM marker element
const customElement = document.createElement('div');
// ... style your element ...

// Prevent DOM event from bubbling up
customElement.addEventListener('click', (e) => {
  e.stopPropagation();
  // Manually trigger the Marker's click event
  google.maps.event.trigger(yourMarkerInstance, 'click');
});

5. Confirm API Version Compatibility #

Make sure you're using a stable version of the Google Maps API (e.g., specify v=3.46 in your API script URL) instead of an unstable beta version. Newer test versions might have breaking changes to event binding methods.

If none of these fix the issue, sharing a bit more code (like your full marker creation logic or map setup) would help narrow things down further!

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