Question 225794 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Google Maps AdvancedMarker hover listener function not working

I have created a function that places an array of pins on a map. I have already added a click function to all markers that re-centers the map on the new location and zooms to the appropriate. This part works without issue.

The mouseover event listener above it will not work & I can’t figure out why. Is there something I’m overlooking?

function setMarker(loc,pos){
    pos = { lat: pos['lat'], lng: pos['lng'] }; 
    let marker = new AdvancedMarkerElement({
        map: map,
        position: pos,
        title: loc
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        console.log('Marker has been moused over.');
    });

    google.maps.event.addListener(marker, 'click', function() {
        map.panTo({ lat: jp[loc]['lat'], lng: jp[loc]['lng']} );
        animZoom(jp[loc]['zoom']);
        $location = loc;
    });
}
Tags:

2

Answers


  1. 0

    Looking at the API https://developers.google.com/maps/documentation/javascript/events

    I feel like the mouseover is kind of buggy and only activates when the mouse is off the map then moved onto the map to mouseover.

    Login or Signup to reply.
  2. 0

    The code you’ve shared seems correct for adding event listeners to markers on a Google Map. If the click event listener is working as expected but the mouseover event listener is not, there are a few things you can check and consider:

    Ensure that the Mouseover Event is Triggered:
    Make sure that the mouseover event is actually being triggered. Sometimes, issues can arise if the mouseover event is not fired due to other elements in your HTML or CSS that might interfere with the marker.

    Check for Conflicts or Errors:
    Ensure that there are no errors or conflicts in your JavaScript code that might be causing the mouseover event not to work. Check the browser’s console for any error messages.

    Check if AdvancedMarkerElement is Compatible:
    Since you’re using AdvancedMarkerElement, ensure that this custom marker element library is fully compatible with Google Maps API event listeners. There’s a possibility that this library might have its own way of handling events.

    Check Map Z-Index:
    Check if the z-index of your markers and other map elements is set correctly. If markers are positioned beneath other elements, the mouseover event might not be triggered as expected.

    Inspect DOM Elements:
    Use browser developer tools to inspect the actual DOM elements generated by the map library and custom marker library. This can help you verify if the event listeners are correctly attached.

    Try Basic Markers:
    If possible, try using basic Google Maps markers without any custom libraries to see if the issue persists. This can help isolate whether the issue is related to your custom marker library.

    Use addListenerOnce:
    Consider using google.maps.event.addListenerOnce instead of addListener to see if the event is being triggered at all.

    Check Browser Compatibility:
    Ensure that you’re testing your code in different browsers. Sometimes, certain browser-specific behaviors might impact the event listeners.

    If none of these steps resolves the issue, it might be helpful to provide more context, such as the code where you initialize the map, the code related to your AdvancedMarkerElement library, and any relevant HTML/CSS code. This additional context can help in diagnosing the problem more accurately.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search