Google Maps Api V3 - Assigning Multiple Listeners to Same Marker Object

Question

Currently working on a project to upgrade our Goole Maps API from v2 to v3 and ran into an issue and need confirmation on whether it's possible to register multiple listeners to the same marker. Can anyone confirm whether Goole Maps API v3 supports multiple listeners on the same marker like API v2 can?

Sample Code:

var mapObject = document.getElementById('map_canvas');
var points = new Array();
var markers = new Array();

var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(33.260081, -117.279369),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    draggable: true,
    scaleControl: false,
    zoomControl: true,                  
    panControl: true,                    
    scrollwheel: false,
    disableDoubleClickZoom: false,
    navigationControlOptions: {
    style: google.maps.NavigationControlStyle.ZOOM_PAN
}

map = new google.maps.Map(mapObject, mapOptions);

points.push(lat:'33.260081', lng:'-117.279369');
points.push(lat:'33.260079', lng:'-117.279371');
points.push(lat:'33.260083', lng:'-117.279373');

for (var i in points) {

    var point = points[i];

    var marker = initMarker(point);

    markers.push(marker);

    google.maps.event.addListener(marker, 'mouseover', function() {
        alert('mouseover');
    });

    google.maps.event.addListener(marker, 'click', function() {
        alert('click');
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
        alert('mouseout');
    });

    bounds.extend(new google.maps.LatLng(point.lat, point.lng));
}

When I hover over the marker, it alerts with 'mouseout', then 'mouseover' twice. I would expect it to just alert with 'mouseover' once.

When I click a marker it alerts with 'click', then 'mouseout', then 'click', then 'mouseover'. I would expect it to just alert 'click'.

When I disable 'mouseover' and 'mouseout', 'click' works as expected. And when I disable 'click' and 'mouseout', 'mouseover' works as expected.

Is there any reason why these events seem to chain to each other? In API v2 we were able to support this functionality no problem.

Thanks in advance.

-- Edit --

This only appears to be happening in Firefox and IE, Chrome handles the events as expected.

-- Edit --

I have gone ahead and setup 2 map demos so a side-by-side comparison can be done.

Version 2 Url: http://map.ownij.com/index2.php

Version 3 Url: http://map.ownij.com/

Version 2 even listener behavior in Firefox, IE, Chrome:

• mouseover: mouseover
• click: click
• mouseout: mouseout

Version 3 event listener behavior in Firefox, IE:

• mouseover: mouseout, mouseover, mouseover
• click: click, mouseout, click
• mouseout: mouseout, mouseout

Version 3 even listener behavior in Chrome:

• mouseover: mouseover
• click: click
• mouseout: mouseout

As you can see, v3 event behavior works as expected in chrome, but in FF and IE, each event triggers multiple listeners which results in unusual behavior.

We built our maps to allow a map bubble to appear when a user hovers over a marker, so when the mouseover fires the mouseout event, the bubble re-renders indefinitely until the user moves the mouse off the marker.

We cannot release our v3 upgrade until this has been resolved, otherwise we rob our clients of current functionality.

-- Edit --

Updated code, by changing alerts to console.log() calls, the events fire as expected. It appears there is some unusual event handling with respect to non-infowindow calls (alerts, ebubble, etc.).

Answer 1

Probably these additional events are caused by alert. Try logging the events in a way that does not interact with the mouse, for example using console.log (not sure if that by now is available in internet exploder though).

Simply speaking, my guess is that the popup causes your mouse to "mouseout" (and "mouseover" the popup). etc. the additional events then are probably caused when the popup disappears again.