Google V3 Mapstraction behavior

[mjesun]

Hi all,

I've recently started using Mapstraction at work, so I'm not quite familiar with the interface, but I think I've found what could be considered a bad behavior.

We are currently using Google Maps V3, putting many markers over a map, and adding an infoWindow to each of them. As you know, V3 allows you to have many infowindows shown at the same time, but that is not a behavior we want to have, so I wrote a code like this:

function openLayer(event, marker) {
    map.markers.forEach(function(marker) {
        marker.closeBubble();
    });

    marker.openBubble();
}

Testing this code, I found that, on the first click, two layers are created for the same marker, thus making impossible to close the first one. After digging in the code, I found the following snippet:

if (this.infoBubble) {
    var event_action = "click";
    if (this.hover) {
        event_action = "mouseover";
    }
    google.maps.event.addListener(marker, event_action, function() {
        marker.mapstraction_marker.openBubble();
    });
}

Which is automatically adding a listener for showing the layer. If I comment the handler, everything works fine. I could not trace why the info window is created twice.

But, apart from this, should mapstraction add default handlers? I think it would be better if this is explicitly done rather than implicitly.

[vicchi]

Hi ... thanks for this. Are you using the master branch of Mapstraction? If so, could you re-test against the release-2.1 branch and let me know if this is still an issue?

If it is, could you post a working example, preferably as a Gist, so I can take a better look at this?

-Gary

[mjesun]

Hi,

We've reproduced the same behavior with the release-2.1 branch, so we isolated our code and created a gist with it: https://gist.github.com/mjesun/5168429. Let me know if you need more information.

[vicchi]

Thanks. I'll take a look later today or over the weekend.

[vicchi]

There's something very odd going on here but I haven't yet worked out what it is. It seems the order of Marker creation is important. If I use your test code and click on the left most marker and then on the right, both infoBubbles stay open. If I then close down the infoBubbles and click on the right most marker and then the left most marker, it works. It's also the same if I refresh the browser, right most and then left most works. This is bizarre. Will keep looking at this.

[mjesun]

Hi,

Well, technically I've found that the problem is not related to closing the window, but to two infoBubbles superimposed one on top of the other. I noticed that by looking to the drop shadow that Google generates for each infoBubble (open the frist bubble, then try closing it; you'll see that the infoBubble still exists, but the shadow englighten).

[vicchi]

I can see that the infoBubble is creating the shadow, as it should, but I think this may be down to the fact that the event handlers Mapstraction enqueues on your behalf, via the native Google API event system, fire first, before the Mapstraction events fire. But that still doesn't explain why a native Google API call to close the infoBubble isn't working in one order but does in the other. I'll keep looking ...

[vicchi]

And also, I don't see two infoBubble layers being created for a single Marker, which is what I think you were saying in your initial post?

[vicchi]

One other thing. I agree that the default click/hover handlers get in the way with a use case like this. I'll look to making them the default but to allow an optional override for custom case like the one you have. That way your use case will be supported but we won't regress and break existing code.

[mjesun]

I've attached some images so you can see where are the two infoBubble layers:

First, as you said, you need to click on the left marker:

Then, an (apparently) single infoBubble will appear:

But if you try to close it, you'll see that, in fact, there were two infoBubbles, one on top of the other.

As you can see, the shadow enlightened, because there was a shadow on top of a shadow. Now, if you close that second bubble, it will successfully close. You can corroborate the fact that there are two infoBubble layers by looking at the generated DOM (inside the Google map).

[vicchi]

Now I see exactly what you mean but I still don't understand why this is happening. I'll keep on digging into this.

[vicchi]

Some progress. It's definitely something to do with the default click handler that mxn.Marker.toProprietary installs when a Marker is created if there's an infoBubble specified.

If I change your test code slightly so that the markers are added to the map before the call to mxn.Marker.setInfoBubble() is made, then the default handlers aren't installed (which you could argue is a bug in itself, or at least inconsistent behaviour), then your test code works as you would think it should. In other words, rather than having this in your test code ...

marker1.setInfoBubble('marker1');
map.addMarker(marker1);

marker2.setInfoBubble('marker2');
map.addMarker(marker2);

... I now have this ...

map.addMarker(marker1);
map.addMarker(marker2);

marker1.setInfoBubble('marker1');
marker2.setInfoBubble('marker2');

Which points the finger firmly at the behaviour of the default click/hover handler that mxn.Marker.toProprietary installs. What I don't yet understand is why this happens. But it's some progress and has narrowed the parameters for tracking this down somewhat.

[mjesun]

I think I have narrowed even more the problem. After your discoveries, I found that the problem is related to calling closeBubble over the marker which is going to be opened, before it actually opens. This makes some strange behavior involving the layer opened on the default click handler, which makes in fact opening two layers.

I found this by blocking the first call to closeBubble, by using this code snippet:

var notFirstOpen = false;

var handler = function(e, marker) {
    if (notFirstOpen) {
        //We close alll the existing bubbles.
        map.markers.forEach(function(item, i) {
            item.closeBubble();
        });
    }

    notFirstOpen = true;

    //We open the corresponding bubble.
    marker.openBubble();
};

[vicchi]

That makes more sense. I think the way forward is to make the default handlers an option, as I mentioned earlier, so that existing code doesn't break, but you can override the default click/hover being implemented if you want to handle the click/hover event yourself. I haven't written the code to do this yet but I image it would look something like this ...

var marker1 = new mxn.Marker(latLon1);
marker1.setInfoBubble('marker1');
marker1.setOptions({ event: 'none' });

... where the options passed into the new mxn.Marker.setOptions() call would be one of click, hover or none. click and hover mirror the current implementation whilst none disables the installing of an infoBubble event handler entirely.

[gilesc50]

+1 Vote for this idea.

Giles

[vicchi]

I can see how the Easter weekend is shaping up ....