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

Ended up just doing away with the hover listener and going with click listener. Would eventually like to add the hover functionality back, but don’t have the time to track it down now.